Javascript Thousand Separator / รูปแบบสตริง [ซ้ำ]

มีฟังก์ชันใด ๆ ใน Javascript สำหรับการจัดรูปแบบตัวเลขและสตริงหรือไม่?

ฉันกำลังมองหาวิธีพันตัวคั่นสำหรับสตริงหรือตัวเลข ... (ชอบ String รูปแบบใน c #)

อัปเดต (7 ปีต่อมา)

การอ้างอิงที่อ้างถึงในคำตอบเดิมด้านล่างนี้ผิด มีถูกสร้างขึ้นในฟังก์ชั่นนี้ซึ่งเป็นสิ่งที่Kaiserแสดงให้เห็นด้านล่าง:toLocaleString

ดังนั้นคุณสามารถทำได้:

(1234567.89).toLocaleString('en')              // for numeric input
parseFloat("1234567.89").toLocaleString('en')  // for string input

ฟังก์ชั่นที่ใช้งานด้านล่างก็ใช้ได้เช่นกัน แต่ก็ไม่จำเป็น

(ผมคิดว่าบางทีฉันได้รับโชคดีและพบว่ามันเป็นสิ่งที่จำเป็นกลับไปในปี 2010 แต่ไม่มี. ตามนี้อ้างอิงที่น่าเชื่อถือมาก , toLocaleString ได้เป็นส่วนหนึ่งของมาตรฐานตั้งแต่ ECMAScript 3rd Edition [1999] ซึ่งผมเชื่อว่ามันหมายถึง จะได้รับการสนับสนุนย้อนหลังไปถึง IE 5.5)

คำตอบเดิม

ตามข้อมูลอ้างอิงนี้ไม่มีฟังก์ชันในตัวสำหรับการเพิ่มลูกน้ำลงในตัวเลข แต่หน้านั้นมีตัวอย่างวิธีการเขียนโค้ดด้วยตัวคุณเอง:

function addCommas(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

แก้ไข: หากต้องการไปอีกทางหนึ่ง (แปลงสตริงด้วยลูกน้ำเป็นตัวเลข) คุณสามารถทำสิ่งนี้ได้:

parseFloat("1,234,567.89".replace(/,/g,''))

หากเกี่ยวกับการแปลตัวคั่นหลายพันตัวคั่นและตัวคั่นทศนิยมให้ดำเนินการดังต่อไปนี้:

// --> numObj.toLocaleString( [locales [, options] ] )
parseInt( number ).toLocaleString();

มีหลายตัวเลือกที่คุณสามารถใช้ได้ (และแม้แต่ภาษาที่มีทางเลือก):

number = 123456.7089;

result  = parseInt( number ).toLocaleString() + "<br>";
result += number.toLocaleString( 'de-DE' ) + "<br>";
result += number.toLocaleString( 'ar-EG' ) + "<br>";
result += number.toLocaleString( 'ja-JP', { 
  style           : 'currency',
  currency        : 'JPY',
  currencyDisplay : 'symbol',
  useGrouping     : true
} ) + "<br>";
result += number.toLocaleString( [ 'jav', 'en' ], { 
  localeMatcher            : 'lookup',
  style                    : 'decimal',
  minimumIntegerDigits     : 2,
  minimumFractionDigits    : 2,
  maximumFractionDigits    : 3,
  minimumSignificantDigits : 2,
  maximumSignificantDigits : 3
} ) + "<br>";

var el = document.getElementById( 'result' );
el.innerHTML = result;

<div id="result"></div>

รายละเอียดเกี่ยวกับข้อมูลหน้า MDN

แก้ไข: commentor @I เช่นเซเรน่าจะเพิ่มต่อไปนี้:

เพื่อสนับสนุนเบราว์เซอร์ที่มีสถานที่ที่ไม่ใช่ภาษาอังกฤษที่เรายังคงต้องการการจัดรูปแบบภาษาอังกฤษ, value.toLocaleString('en')การใช้งาน ยังใช้สำหรับจุดลอย

อัปเดตโดยใช้การสนับสนุน Look-behind ซึ่งสอดคล้องกับการเปลี่ยนแปลง ECMAScript2018
สำหรับความเข้ากันได้แบบย้อนหลังให้เลื่อนลงไปด้านล่างเพื่อดูโซลูชันดั้งเดิม

อาจใช้นิพจน์ทั่วไป - มีประโยชน์อย่างยิ่งในการจัดการกับตัวเลขจำนวนมากที่จัดเก็บเป็นสตริง

const format = num => 
    String(num).replace(/(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')

;[
    format(100),                           // "100"
    format(1000),                          // "1,000"
    format(1e10),                          // "10,000,000,000"  
    format(1000.001001),                   // "1,000.001001"
    format('100000000000000.001001001001') // "100,000,000,000,000.001001001001
]
    .forEach(n => console.log(n))

»คำอธิบาย Verbose regex (regex101.com)

คำตอบเดิมนี้อาจไม่จำเป็นต้องใช้ แต่สามารถใช้เพื่อความเข้ากันได้แบบย้อนกลับ

การพยายามจัดการสิ่งนี้ด้วยนิพจน์ทั่วไปเดียว(โดยไม่มีการเรียกกลับ)ความสามารถในปัจจุบันของฉันทำให้ฉันไม่สามารถมองข้ามด้านหลังใน Javascript ได้ ... ไม่น้อยไปกว่านี้คือทางเลือกอื่นที่กระชับซึ่งใช้ได้กับกรณีทั่วไปส่วนใหญ่ - การบัญชีสำหรับจุดทศนิยมใด ๆ โดยไม่สนใจการแข่งขันที่ดัชนีของการแข่งขันปรากฏหลังดัชนีของช่วงเวลาหนึ่ง

const format = num => {
    const n = String(num),
          p = n.indexOf('.')
    return n.replace(
        /\d(?=(?:\d{3})+(?:\.|$))/g,
        (m, i) => p < 0 || i < p ? `${m},` : m
    )
}

;[
    format(100),                           // "100"
    format(1000),                          // "1,000"
    format(1e10),                          // "10,000,000,000"  
    format(1000.001001),                   // "1,000.001001"
    format('100000000000000.001001001001') // "100,000,000,000,000.001001001001
]
    .forEach(n => console.log(n))

»คำอธิบาย Verbose regex (regex101.com)

มีปลั๊กอินหมายเลข jQuery ที่ดี: https://github.com/teamdf/jquery-number

ช่วยให้คุณสามารถเปลี่ยนตัวเลขใดก็ได้ในรูปแบบที่คุณต้องการพร้อมตัวเลือกสำหรับตัวเลขทศนิยมและอักขระคั่นสำหรับทศนิยมและพัน:

$.number(12345.4556, 2);          // -> 12,345.46
$.number(12345.4556, 3, ',', ' ') // -> 12 345,456

คุณสามารถใช้ภายในช่องป้อนข้อมูลโดยตรงซึ่งดีกว่าโดยใช้ตัวเลือกเดียวกันกับด้านบน:

$("input").number(true, 2);

หรือคุณสามารถใช้กับองค์ประกอบ DOM ทั้งชุดโดยใช้ตัวเลือก:

$('span.number').number(true, 2);

ฉันใช้สิ่งนี้:

function numberWithCommas(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

ที่มา: ลิงค์

// thousand separates a digit-only string using commas
// by element:  onkeyup = "ThousandSeparate(this)"
// by ID:       onkeyup = "ThousandSeparate('txt1','lbl1')"
function ThousandSeparate()
{
    if (arguments.length == 1)
    {
        var V = arguments[0].value;
        V = V.replace(/,/g,'');
        var R = new RegExp('(-?[0-9]+)([0-9]{3})'); 
        while(R.test(V))
        {
            V = V.replace(R, '$1,$2');
        }
        arguments[0].value = V;
    }
    else  if ( arguments.length == 2)
    {
        var V = document.getElementById(arguments[0]).value;
        var R = new RegExp('(-?[0-9]+)([0-9]{3})'); 
        while(R.test(V))
        {
            V = V.replace(R, '$1,$2');
        }
        document.getElementById(arguments[1]).innerHTML = V;
    }
    else return false;
}   

var number = 35002343;

console.log(number.toLocaleString());

สำหรับข้อมูลอ้างอิงคุณสามารถตรวจสอบได้ที่นี่ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

PHP.js มีฟังก์ชั่นการทำเช่นนี้เรียกว่าnumber_format หากคุณคุ้นเคยกับ PHP มันทำงานในลักษณะเดียวกันทุกประการ

คุณสามารถใช้จาวาสคริปต์ ด้านล่างนี้เป็นรหัสซึ่งจะเป็นacceptตัวเลขและหนึ่งเท่านั้นdot

นี่คือจาวาสคริปต์

<script >

            function FormatCurrency(ctrl) {
                //Check if arrow keys are pressed - we want to allow navigation around textbox using arrow keys
                if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
                    return;
                }

                var val = ctrl.value;

                val = val.replace(/,/g, "")
                ctrl.value = "";
                val += '';
                x = val.split('.');
                x1 = x[0];
                x2 = x.length > 1 ? '.' + x[1] : '';

                var rgx = /(\d+)(\d{3})/;

                while (rgx.test(x1)) {
                    x1 = x1.replace(rgx, '$1' + ',' + '$2');
                }

                ctrl.value = x1 + x2;
            }

            function CheckNumeric() {
                return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46;
            }

  </script>

HTML

<input type="text" onkeypress="return CheckNumeric()" onkeyup="FormatCurrency(this)" />

DEMO JSFIDDLE

สิ่งที่คุณต้องทำมีเพียงแค่นี้ :

123000.9123.toLocaleString()
//result will be "123,000.912"

number = 123456.7089;
result = parseInt( number ).toLocaleString() + "<br>";
result = number.toLocaleString( 'pt-BR' ) + "<br>";

var el = document.getElementById( 'result' );
el.innerHTML = result;

<div id="result"></div>

การรวมกันของโซลูชันสำหรับปฏิกิริยา

  let converter = Intl.NumberFormat();
  let salary =  monthlySalary.replace(/,/g,'')
  console.log(converter.format(salary))

  this.setState({
    monthlySalary: converter.format(salary)
  })
}

handleOnChangeMonthlySalary(1000)```

คุณสามารถใช้ ngx-format-field เป็นคำสั่งในการจัดรูปแบบค่าอินพุตซึ่งจะปรากฏในมุมมอง จะไม่จัดการกับค่าอินพุตซึ่งจะถูกบันทึกไว้ในแบ็กเอนด์ ดูลิงค์ที่นี่ !

ตัวอย่าง:

component.html:

<input type="text" formControlName="currency" [appFormatFields]="CURRENCY"
(change)="onChangeCurrency()">

component.ts

onChangeCurrency() {
this.currency.patchValue(this.currency.value);
}

ดูการสาธิตได้ที่นี่ !

คุณสามารถใช้ฟังก์ชันต่อไปนี้:

function format(number, decimals = 2, decimalSeparator = '.', thousandsSeparator = ',') {
  const roundedNumber = number.toFixed(decimals);
  let integerPart = '',
    fractionalPart = '';
  if (decimals == 0) {
    integerPart = roundedNumber;
    decimalSeparator = '';
  } else {
    let numberParts = roundedNumber.split('.');
    integerPart = numberParts[0];
    fractionalPart = numberParts[1];
  }
  integerPart = integerPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, `$1${thousandsSeparator}`);
  return `${integerPart}${decimalSeparator}${fractionalPart}`;
}

// Use Example

let min = 1556454.0001;
let max = 15556982.9999;

console.time('number format');
for (let i = 0; i < 15; i++) {
  let randomNumber = Math.random() * (max - min) + min;
  let formated = format(randomNumber, 4, ',', '.'); // formated number

  console.log('number: ', randomNumber, '; formated: ', formated);
}
console.timeEnd('number format');

ฉันไม่ชอบคำตอบใด ๆ ที่นี่ดังนั้นฉันจึงสร้างฟังก์ชันที่เหมาะกับฉัน แค่อยากแชร์เผื่อว่าใครเห็นว่ามีประโยชน์

function getFormattedCurrency(num) {
    num = num.toFixed(2)
    var cents = (num - Math.floor(num)).toFixed(2);
    return Math.floor(num).toLocaleString() + '.' + cents.split('.')[1];
}