Câu hỏi Cách in một số bằng dấu phẩy dưới dạng dấu phân cách hàng nghìn trong JavaScript


Tôi đang cố gắng in một số nguyên JavaScript với dấu phẩy là hàng nghìn dấu tách. Ví dụ, tôi muốn hiển thị số 1234567 là "1,234,567". Tôi sẽ đi đâu để tới đó?

Đây là cách tôi đang làm nó:

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return x;
}

Có cách nào đơn giản hơn hay thanh lịch hơn để làm điều đó? Sẽ tốt hơn nếu nó hoạt động với phao nổi, nhưng điều đó không cần thiết. Nó không cần phải được địa phương cụ thể để quyết định giữa các dấu chấm và dấu phẩy.


1171
2018-05-24 23:42


gốc


Số (x) .toLocaleString () - Boffin
@ Tài khoản này không hoạt động đối với số loại đầu vào (vì dấu phẩy) - trong câu trả lời được chấp nhận, chúng tôi có thể thay thế dấu phẩy thành dấu chấm và số loại đầu vào sẽ hoạt động - Vitaly Zdanevich
Đáng chú ý là Number.prototype.toLocaleString  vẫn không hoạt động trong Safari, trong 2016. Thay vì thực sự định dạng số, nó chỉ trả về nó, không có lỗi nào bị ném. Có facepalm lớn nhất hiện nay là kết quả của việc đó ... #goodworkApple - aendrew
Tuy nhiên, nó xuất hiện để làm việc trong safari iOS. - Tim
toLocaleString không nhất quán và không nên sử dụng. Ví dụ - trên Firefox, điều này sẽ trả lại 1,234 nhưng trên IE, điều này sẽ thêm số thập phân: 1,234,00 - Bort


Các câu trả lời:


Tôi đã sử dụng ý tưởng từ câu trả lời của Kerry, nhưng đơn giản hóa nó vì tôi chỉ đang tìm kiếm một cái gì đó đơn giản cho mục đích cụ thể của tôi. Đây là những gì tôi đã làm:

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

Đây là tất cả những gì bạn thực sự cần biết.

@ Bom Bom hỏi làm thế nào regex hoạt động. Lời giải thích của tôi khá dài. Nó sẽ không phù hợp với các ý kiến ​​và tôi không biết nơi nào khác để đặt nó vì vậy tôi đang làm nó ở đây. Nếu bất cứ ai có bất cứ gợi ý nào khác về nơi đặt nó, xin vui lòng cho tôi biết.

Regex sử dụng 2 xác nhận lookahead: một giá trị dương để tìm bất kỳ điểm nào trong chuỗi có nhiều 3 chữ số trong hàng sau nó và xác nhận phủ định để đảm bảo rằng điểm đó chỉ có chính xác bội số của 3 chữ số. Biểu thức thay thế đặt dấu phẩy ở đó.

Ví dụ: nếu bạn vượt qua "123456789.01", xác nhận tích cực sẽ khớp với mọi điểm ở bên trái của 7 (vì "789" là bội số của 3 chữ số, "678" là bội số của 3 chữ số, "567", v.v.) Xác nhận phủ định kiểm tra rằng bội số của 3 chữ số không có bất kỳ chữ số nào sau chữ số đó. "789" có một khoảng thời gian sau nó vì vậy nó là chính xác một bội số của 3 chữ số, do đó, một dấu phẩy đi đó. "678" là bội số của 3 chữ số nhưng chữ "9" sau chữ số đó, vì vậy 3 chữ số đó là một phần của nhóm 4 và dấu phẩy không xuất hiện ở đó. Tương tự cho "567". "456789" là 6 chữ số, là bội số của 3, vì vậy dấu phẩy sẽ xuất hiện trước đó. "345678" là bội số của 3, nhưng nó có dấu "9" sau nó, vì vậy không có dấu phẩy nào ở đó. Và cứ thế. "\ B" giữ regex không đặt dấu phẩy ở đầu chuỗi.

@ neu-rah đã đề cập rằng chức năng này thêm dấu phẩy ở những nơi không mong muốn nếu có nhiều hơn 3 chữ số sau dấu thập phân. Nếu đây là một vấn đề, bạn có thể sử dụng chức năng này:

const numberWithCommas = (x) => {
  var parts = x.toString().split(".");
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return parts.join(".");
}

2072
2018-05-25 00:40



Điều này thực sự tuyệt vời! Cảm ơn vì đã giải tán câu trả lời của Kerry xuống chính xác những gì tôi cần. Cảm ơn! Đây là một giải pháp thanh lịch hơn nhiều so với những gì tôi đã từng làm việc. - Mike Grace
Rất mát mẻ, đã nhận thấy rằng nó có vấn đề với số có nhiều hơn 3 địa điểm sau dấu thập phân mặc dù. - Eric Petroelje
hãy thử numberWithCommas (12345.6789) -> "12,345.6,789" tôi không thích nó - neu-rah
Cải tiến nhỏ sửa chữa sau '.' vấn đề '123456789.01234'.replace (/ \ B (? = (? = \ d * \.) (\ d {3}) + (?! \ d)) / g,' _ ') - Dmitrij Golubev
@DmitrijGolubev Không hoạt động với các số nguyên. Có lẽ buộc điểm thập phân sẽ là giải pháp. - Vlad


Tôi ngạc nhiên không ai đề cập đến Number.prototype.toLocaleString. Nó được thực hiện trong JavaScript 1.5 (được giới thiệu vào năm 1999) để nó được hỗ trợ về cơ bản trên các trình duyệt chính.

var n = 34523453.345
n.toLocaleString()
"34,523,453.345"

Nó cũng hoạt động trong Node.js như của v0.12 thông qua bao gồm Intl

Nếu bạn muốn một cái gì đó khác, Numeral.js có thể thú vị.


1052
2017-07-15 21:01



@csigrist Các điểm tốt, nhưng nó không tệ như nó có vẻ. Tốc độ phụ thuộc vào trình duyệt. Trong FF hoặc Opera nó hoạt động tốt. Mặc dù vậy, tôi vẫn hút trong Chrome. Đối với zeroes: var number = 123456.000; number.toLocaleString('en-US', {minimumFractionDigits: 2}); "123,456.00" Những tùy chọn này không hoạt động trong FF hoặc Safari. - uKolka
Dường như không hoạt động trong Safari. - lambinator
Sự khác biệt hiệu suất có thể hoặc không có thể là một vấn đề, tùy thuộc vào ngữ cảnh. Nếu được sử dụng cho một bảng khổng lồ của 1000 kết quả thì nó sẽ quan trọng hơn nhưng nếu chỉ được sử dụng cho một giá trị duy nhất, sự khác biệt là không đáng kể. Nhưng lợi thế là nó có ý thức địa phương, vì vậy một người nào đó ở châu Âu sẽ thấy 34.523.453.345 hoặc là 34 523 453,345. Điều này sẽ quan trọng hơn trên một trang web với khách truy cập từ nhiều quốc gia. - T Nguyen
+1 cho numeral.js - Brade
Cập nhật cho googlers: toLocaleString hoạt động trong Node.js kể từ phiên bản v0.12 thông qua -sự bao gồm của Intl. - srobinson


var number = 1234567890; // Example number to be converted

 Tâm trí rằng javascript có một số nguyên tối đa giá trị của 9007199254740991


toLocaleString:

number.toLocaleString(); // "1,234,567,890"

// A more complex example: 
var number2 = 1234.56789; // floating point example
number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57"


NumberFormat (Safari không được hỗ trợ):

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

Từ những gì tôi đã kiểm tra (ít nhất là Firefox), chúng đều giống nhau hoặc ít hơn về hiệu năng.


177
2017-08-22 08:52



NumberFormat không được hỗ trợ trên Safari, cho bất kỳ ai đang triển khai ở đó. - marcovega
toLocaleString cũng không được hỗ trợ trên safari - Deepak Banka
Hỗ trợ trình duyệt luôn được đề cập ở cuối mỗi trang MDN mà tôi đã liên kết đến. - vsync
căn bản toLocaleString hoạt động trên safari, tùy chọn không - dandavis
các toLocaleString giải pháp có lẽ cũng nên bao gồm ngôn ngữ mong muốn, vì vậy toLocaleString("en"), bởi vì mẫu tiếng Anh sử dụng dấu phẩy. Tuy nhiên, nếu toLocaleString() mà không có chỉ báo locale được chạy ở Pháp, thì nó sẽ tạo ra các khoảng thời gian thay vì dấu phẩy bởi vì đó là những gì được sử dụng để phân tách hàng nghìn cục bộ. - Mike 'Pomax' Kamermans


Tôi đề nghị sử dụng phpjs.org 's number_format ()

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

CẬP NHẬT 02/13/14

Mọi người đã báo cáo điều này không hoạt động như mong đợi, vì vậy tôi đã làm JS Fiddle bao gồm kiểm tra tự động.

Cập nhật 26/11/2017

Đây là fiddle như một Snippet Stack với đầu ra hơi sửa đổi:

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

var exampleNumber = 1;
function test(expected, number, decimals, dec_point, thousands_sep)
{
    var actual = number_format(number, decimals, dec_point, thousands_sep);
    console.log(
        'Test case ' + exampleNumber + ': ' +
        '(decimals: ' + (typeof decimals === 'undefined' ? '(default)' : decimals) +
        ', dec_point: "' + (typeof dec_point === 'undefined' ? '(default)' : dec_point) + '"' +
        ', thousands_sep: "' + (typeof thousands_sep === 'undefined' ? '(default)' : thousands_sep) + '")'
    );
    console.log('  => ' + (actual === expected ? 'Passed' : 'FAILED') + ', got "' + actual + '", expected "' + expected + '".');
    exampleNumber++;
}

test('1,235',    1234.56);
test('1 234,56', 1234.56, 2, ',', ' ');
test('1234.57',  1234.5678, 2, '.', '');
test('67,00',    67, 2, ',', '.');
test('1,000',    1000);
test('67.31',    67.311, 2);
test('1,000.6',  1000.55, 1);
test('67.000,00000', 67000, 5, ',', '.');
test('1',        0.9, 0);
test('1.20',     '1.20', 2);
test('1.2000',   '1.20', 4);
test('1.200',    '1.2000', 3);
.as-console-wrapper {
  max-height: 100% !important;
}


86
2018-05-24 23:47



Không phải là tôi đánh dấu nó xuống, nhưng tôi tin rằng mọi người đã làm như vậy bởi vì nó không hoạt động. Vì nó đứng tôi tìm thấy ngay cả một số xét nghiệm của bạn không hoạt động. - Andrew S
@Andrew S - Chỉ 1 người đã đánh dấu nó xuống. Nó hoạt động, tôi đã sử dụng nó trong mã của riêng tôi nhiều lần. Nó cũng không phải mã của tôi (cũng không phải các bài kiểm tra của tôi), tôi tham khảo trang web mà nó đến từ đó, đó là một trang web nổi tiếng. Có lẽ họ có một phiên bản cập nhật của nó) như mã bạn đang xem là 3 tuổi. - Kerry Jones
@ernix - Nhà điều hành đã yêu cầu JavaScript, câu trả lời tôi đã đưa ra Là JavaScript. Đây là một giải thích JavaScript của một hàm PHP. - Kerry Jones
@ernix - nó hoạt động chính xác như mong đợi với ví dụ mà OP đã đưa ra. Tôi đặt một fiddle để bạn có thể nhìn thấy. - Kerry Jones
@ernix - Được rồi, nhưng vấn đề là nó chính xác những gì OP yêu cầu. Nó là từ một trang web khác (không được duy trì bởi tôi, và tôi đã nói điều này trước đây), và khi cho nó biến thích hợp, nó hoạt động chính xác như đã nêu. Nếu bạn tin rằng đó là một lỗi, hãy liên hệ phpjs.org hoặc xem họ có phiên bản cập nhật hay không. - Kerry Jones


Đây là một biến thể của câu trả lời @ mikez302, nhưng được sửa đổi để hỗ trợ số có số thập phân (theo phản hồi của @ neu-rah rằng numberWithCommas (12345.6789) -> "12,345.6,789" thay vì "12,345.6789"

function numberWithCommas(n) {
    var parts=n.toString().split(".");
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

65
2018-06-05 15:03



Hey nhìn kìa, bạn là một cộng tác viên nguồn mở :) - Jacob Stamm


function formatNumber (num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

print(formatNumber(2665));      // 2,665
print(formatNumber(102665));    // 102,665
print(formatNumber(111102665)); // 111,102,665

54
2017-08-19 06:47



Điều này làm gì mà câu trả lời của tôi không? Các regex trông hơi khác nhau nhưng có vẻ như nó sẽ làm điều tương tự. - Elias Zamaria
nó ngắn hơn :) - Tutankhamen
Đây là thanh lịch. Chính xác những gì tôi đang tìm kiếm. - traditional
Từ blog.tompawlak.org/number-currency-formatting-javascript? Vấn đề đã biết: formatNumber (0.123456) = 0.123,456 Sự vắng mặt của lookbehind trong JS làm cho nó khó khăn để sửa chữa nó với một regex thanh lịch. - Vlad
thậm chí làm việc với thời gian! 1,234: 56 - sean


Cảm ơn tất cả mọi người vì câu trả lời của họ. Tôi đã xây dựng một số câu trả lời để tạo ra một giải pháp "một kích thước phù hợp hơn".

Đoạn mã đầu tiên thêm một hàm bắt chước PHP'S number_format() với nguyên mẫu Số. Nếu tôi định dạng một số, tôi thường muốn số thập phân, vì vậy hàm sẽ lấy số chữ số thập phân để hiển thị. Một số quốc gia sử dụng dấu phẩy làm dấu thập phân và số thập phân làm dấu tách hàng nghìn để chức năng cho phép các dấu phân tách này được đặt.

Number.prototype.numberFormat = function(decimals, dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.toFixed(decimals).split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep);

    return parts.join(dec_point);
}

Bạn sẽ sử dụng như sau:

var foo = 5000;
console.log(foo.numberFormat(2)); // us format: 5,000.00
console.log(foo.numberFormat(2, ',', '.')); // european format: 5.000,00

Tôi thấy rằng tôi thường cần phải lấy lại số cho các phép toán, nhưng parseFloat chuyển đổi 5000 thành 5, đơn giản là lấy chuỗi thứ nhất của các giá trị số nguyên. Vì vậy, tôi tạo ra chức năng chuyển đổi float của riêng tôi và thêm nó vào nguyên mẫu String.

String.prototype.getFloat = function(dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.split(dec_point);
    var re = new RegExp("[" + thousands_sep + "]");
    parts[0] = parts[0].replace(re, '');

    return parseFloat(parts.join(dec_point));
}

Bây giờ bạn có thể sử dụng cả hai chức năng như sau:

var foo = 5000;
var fooString = foo.numberFormat(2); // The string 5,000.00
var fooFloat = fooString.getFloat(); // The number 5000;

console.log((fooString.getFloat() + 1).numberFormat(2)); // The string 5,001.00

31
2017-09-18 01:50



Rất đẹp, tôi đã mượn phương thức đầu tiên;) Nhưng nó không tạo ra kết quả chính xác khi bạn muốn sử dụng định dạng châu Âu và số đó là phân số. Dòng 5 phải là: var parts = this.toFixed(decimals).toString().split('.'); - vbwx
Bạn đúng rồi! toFixed () thay đổi dấu phẩy thành dấu chấm và do đó, '.' nên được sử dụng thay vì var dec_point. Cảm ơn bạn đã chỉ ra điều đó. - J.Money
bạn có thể tạo mô-đun npm cho điều này không? - chovy
@ J.Money The .toString là không cần thiết, toFixed đã trả về một chuỗi. - Ariel
Tôi không biết tại sao bạn đã đề cập đến PHP ở đây cả, hoặc được đưa ra một chức năng prototipical tồn tại - vsync


Intl.NumberFormat

Hàm JS gốc. Được hỗ trợ bởi IE11, Edge, Safari mới nhất, Chrome, Firefox, Opera, Safari trên iOS và Chrome trên Android.

var number = 3500;

console.log(new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale

28
2017-10-31 23:56



Không được tất cả các trình duyệt hỗ trợ: caniuse.com/#feat=internationalization - Vincent Decaux
Câu trả lời của tôi đã được cập nhật để trả lời nhận xét của bạn. Cảm ơn! - lonelyloner


Tôi nghĩ đây là biểu thức chính quy ngắn nhất có thể thực hiện được:

/\B(?=(\d{3})+\b)/g

"123456".replace(/\B(?=(\d{3})+\b)/g, ",")

Tôi đã kiểm tra nó trên một vài con số và nó hoạt động.


22
2018-03-13 06:31



chỉ hoạt động tốt nếu bạn không có số float với hơn 3 số sau dấu phân tách trong trường hợp này là dấu chấm. Nếu không, nó cũng thêm dấu phẩy. "1234567890.1234567890" .replace (/ \ B (? = (\ D {3}) + \ b) / g, ",") Điều này sẽ không hoạt động chẳng hạn. Trả về "1,234,567,890,1,234,567,890" - Marcio
Hoạt động tốt cho tiền tệ mặc dù! Chỉ cần làm tròn chữ số của bạn trước khi thêm dấu phẩy. - Kyle Chadha
Nó Thêm, Sau điểm thập phân: 12.3456 ".replace (/ \ B (? = (\ D {3}) + \ b) / g,", ") == 12.3,456 - Shree Tiwari


Number.prototype.toLocaleString() sẽ tuyệt vời nếu nó được cung cấp bởi tất cả các trình duyệt (Safari).

Tôi đã kiểm tra tất cả các câu trả lời khác nhưng không có ai dường như đã làm đầy nó. Đây là một poc hướng tới đó, mà thực sự là một sự kết hợp của hai câu trả lời đầu tiên; nếu toLocaleString hoạt động nó sử dụng nó, nếu nó không sử dụng một chức năng tùy chỉnh.

var putThousandsSeparators;

putThousandsSeparators = function(value, sep) {
  if (sep == null) {
    sep = ',';
  }
  // check if it needs formatting
  if (value.toString() === value.toLocaleString()) {
    // split decimals
    var parts = value.toString().split('.')
    // format whole numbers
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, sep);
    // put them back together
    value = parts[1] ? parts.join('.') : parts[0];
  } else {
    value = value.toLocaleString();
  }
  return value;
};

alert(putThousandsSeparators(1234567.890));


18
2018-05-19 05:11



Lưu ý rằng polyfill chỉ hoạt động với các số có tối đa 3 số thập phân. Ví dụ: 0.12345 sẽ xuất 0.12,345. Một thực hiện tốt cho điều này có thể được tìm thấy trong underscore.string - Andy
bạn nói đúng, đặt value > 1000 để điều kiện nếu sửa chữa trường hợp đó, tuy nhiên đây là một poc và tất nhiên các phiên bản thử nghiệm tốt hơn có thể được tìm thấy ở nơi khác, nhờ chỉ ra. - Sinan
Nó không đủ để đặt value > 1000, bởi vì nó sẽ giống nhau đối với bất kỳ số nào và nhiều hơn 3 số thập phân. ví dụ 1000.12345 trả về 1,000.12,345. Câu trả lời của bạn là tuyệt vời và trên con đường bên phải, nhưng không hoàn thành. Tôi chỉ cố gắng chỉ ra cho những người khác có thể vấp ngã câu trả lời của bạn và chỉ cần sao chép / pasta nó mà không cần thử nghiệm với dữ liệu đầu vào khác nhau. - Andy
alright, điều này cần một chỉnh sửa :) Tôi đồng ý, nhưng bây giờ ít nhất nó sẽ làm việc cho hầu hết các trường hợp. - Sinan


Bộ tách hàng nghìn có thể được chèn theo cách thân thiện với quốc tế bằng cách sử dụng trình duyệt Intl vật:

Intl.NumberFormat().format(1234);
// returns "1,234" if the user's locale is en_US, for example

Xem Bài viết của MDN về NumberFormat để biết thêm, bạn có thể chỉ định hành vi miền địa phương hoặc mặc định cho người dùng. Điều này là một chút dễ hiểu hơn bởi vì nó tôn trọng sự khác biệt địa phương; nhiều quốc gia sử dụng dấu chấm để phân tách các chữ số trong khi dấu phẩy biểu thị số thập phân.

Intl.NumberFormat chưa có trong tất cả các trình duyệt, nhưng nó hoạt động trong Chrome, Opera và IE mới nhất. Bản phát hành tiếp theo của Firefox sẽ hỗ trợ nó. Webkit dường như không có tiến trình thực hiện.


15
2018-04-26 01:43



Trong khi điều này sẽ là tuyệt vời nếu chúng ta có thể sử dụng một chức năng được xây dựng trong đơn giản, nó có thực hiện trình duyệt khủng khiếp. Ví dụ, IE 8-10 và tất cả Safari không hỗ trợ - Blaine Kasten
@BlaineKasten có một tệp chèn lấp hoàn toàn tương thích cho các trình duyệt cũ hơn có sẵn tại đây: github.com/andyearnshaw/Intl.js nó rất lớn, nhưng nó hoạt động. - Mahn
Tôi muốn điều này làm việc trên Safari. - jtheletter
Có sẵn thông qua một CDN pollyfill (chỉ trả về những gì cần thiết dựa trên useragent): cdn.polyfill.io/v2/polyfill.min.js?features=Intl - Kevin
Đã có vấn đề định dạng số lớn với toLocaleString, điều này làm việc tuyệt vời (với polyfill) - asked_io