1.3k

Tôi đang cố gắng in một số nguyên trong JavaScript bằng dấu phẩy dưới dạng hàng ngàn dấu phân cá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:

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

Có một cách đơn giản hơn hoặc thanh lịch hơn để làm điều đó? Sẽ thật tuyệt nếu nó cũng hoạt động với phao, nhưng điều đó là không cần thiết. Không cần phải cụ thể theo địa phương để quyết định giữa các dấu chấm và dấu phẩy.

|
  • 96

    Số (x) .toLocaleString ()

    – Lý Đức Hoàng 23:04:59 09/03/2015
  • @Boffin điều 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

    – Đỗ Chi Lan 13:10:45 16/08/2015
  • 44

    Đáng chú ý là Number.prototype.toLocaleString vẫn không hoạt động trong Safari, vào năm 2016 . Thay vì thực sự định dạng số, nó chỉ trả về nó, không có lỗi ném. Có khuôn mặt lớn nhất hiện nay là kết quả của điều đó ... #goodworkApple

    – Hoàng Ðồng Khánh 11:21:54 10/03/2016
  • Tuy nhiên, nó dường như hoạt động trong safari iOS.

    – Trịnh Ðại Thống 19:54:56 26/05/2017
  • toLocaleString không nhất quán và không nên được sử dụng. Ví dụ: trên Firefox, điều này sẽ trả về 1,234 nhưng trên IE, điều này sẽ thêm số thập phân: 1,234,00

    – Ngô Vĩnh Phúc 16:29:14 21/09/2017
2.3k

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ỉ tìm kiếm thứ gì đó đơn giản cho mục đích cụ thể của mình. Đây là những gì tôi đã làm:

function 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.

@Neils Bom hỏi làm thế nào regex hoạt động. Giải thích của tôi là loại dài. Nó không phù hợp với các bình luận và tôi không biết nên đặt nó ở đâu nữa nên tôi đang thực hiện nó ở đây. Nếu bất cứ ai có bất kỳ đề nghị khác cho 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 khẳng định dương để tìm bất kỳ điểm nào trong chuỗi có nhiều 3 chữ số liên tiếp sau nó và một 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 mọi vị trí bên trái của 7 (vì "789" là bội của 3 chữ số, "678" là bội 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 nó. "789" có một khoảng thời gian sau nó vì vậy nó chính xác là bội của 3 chữ số, vì vậy dấu phẩy xuất hiện ở đó. "678" là bội của 3 chữ số nhưng nó có "9" sau nó, 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 của 3, vì vậy dấu phẩy đi trước đó. "345678" là bội số của 3, nhưng nó có "9" sau nó, vì vậy không có dấu phẩy nào ở đó. Và như vậy. "\ B"

@ neu-rah đã đề cập rằng hàm này thêm dấu phẩy ở những vị trí 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:

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

    Điều này thực sự tuyệt vời! Cảm ơn vì đã chắt lọc 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 cho những gì tôi đã làm việc ban đầu.

    – Bùi Bích Hậu 09:08:55 24/01/2011
  • 1

    Rất tuyệt, đã nhận thấy rằng nó có vấn đề với các số có nhiều hơn 3 vị trí sau dấu thập phân.

    – Tạ Bá Cường 18:34:07 23/02/2012
  • 1

    thử sốWithCommas (12345.6789) -> "12.345.6.789" tôi không thích nó

    – Phan Bích Hậu 13:28:38 27/05/2012
  • 1

    Cải thiện nhỏ mà sửa chữa sau '.' vấn đề '123456789.01234'.replace (/ \ B (? = (? = \ d * \.) (\ d {3}) + (?! \ d)) / g,' _ ')

    – Hoàng Xuân Lộc 09:29:38 17/06/2013
  • 1

    @DmitrijGolubev Không hoạt động cho số nguyên. Có lẽ buộc dấu thập phân sẽ là giải pháp.

    – Lý Việt Dũng 16:13:11 20/01/2015
1.3k

Tôi ngạc nhiên không ai nhắc đến Number.prototype.toLocaleString . Nó được triển khai trong JavaScript 1.5 (được giới thiệu vào năm 1999) vì vậy về cơ bản nó được hỗ trợ 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 kể từ v0.12 thông qua việc bao gồm Intl

Chỉ cần chú ý rằng hàm này trả về chuỗi không phải số

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

|
  • 1

    @csigrist Đ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. Tôi hút trong Chrome mặc dù. Đối với số không: var number = 123456.000; number.toLocaleString('en-US', {minimumFractionDigits: 2}); "123,456.00"Các tùy chọn đó không hoạt động trong FF hoặc Safari.

    – Bùi Bích Hậu 15:50:02 23/07/2013
  • 1

    Dường như không hoạt động trong Safari.

    – Tạ Bá Cường 18:22:18 30/07/2013
  • 1

    Sự khác biệt hiệu suất có thể hoặc không thể là một vấn đề, tùy thuộc vào bối cảnh. Nếu được sử dụng cho một bảng khổng lồ 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ó nhận biết đượ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 34 523 453.345 . Điều này sẽ quan trọng hơn trên một trang web có khách truy cập từ nhiều quốc gia.

    – Phan Bích Hậu 21:06:05 12/02/2014
  • 1
  • 1

    Cập nhật cho nhân viên của Google: toLocaleStringhoạt động trong Node.js kể từ v0.12 thông qua việc bao gồm Intl .

    – Lý Việt Dũng 16:59:46 02/11/2015
200
var number = 1234567890; // Example number to be converted

Lưu ý rằng javascript có giá trị nguyên tối đa9007199254740991


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), cả hai đều ít nhiều giống nhau về hiệu suất.

|
  • 1

    NumberFormat không được hỗ trợ trên Safari, cho bất kỳ ai đang triển khai ở đó.

    – Lý Phúc Duy 01:53:30 12/11/2015
  • 1

    toLocaleString cũng không được hỗ trợ trên safari

    – Hồ Nam Việt 08:12:03 01/02/2016
  • 1

    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.

    – Hoàng Ngọc Lệ 16:38:56 19/03/2016
  • 1

    toLocaleStringcông việc cơ bản trên safari, tùy chọn không

    – Hoàng Thiên Ân 09:16:30 21/06/2016
  • 1

    các toLocaleStringgiải pháp nên có lẽ cũng bao gồm các địa phương mong muốn, vì vậy toLocaleString("en"), bởi vì mô hình tiếng Anh sử dụng dấu phẩy. Tuy nhiên, nếu toLocaleString()không có chỉ báo miền địa phương được chạy ở Pháp, thì nó sẽ mang lại thời gian thay vì dấu phẩy vì đó là những gì được sử dụng để phân tách hàng ngàn cục bộ.

    – Hoàng Cao Sơn 18:05:57 17/11/2016
96

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

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 ngày 13/2/14

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

Cập nhật ngày 26/11/2017

Đây là một đoạn trích với Stack Snippet với đầu ra được sửa đổi một chút:

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;
}

|
  • 1

    Không phải 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. Khi tôi đứng, tôi thấy ngay cả một số bài kiểm tra của bạn không hoạt động.

    – Lý Phúc Duy 11:51:41 19/06/2013
  • 1

    @Andrew S - Chỉ có 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. Đó cũng không phải là mã của tôi (cũng không phải thử nghiệm của tôi), tôi đã tham khảo trang web mà nó đến từ đây, 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ó) vì mã bạn đang xem là 3 tuổi.

    – Hồ Nam Việt 18:03:48 19/06/2013
  • 1

    @ernix - Toán tử yêu cầu JavaScript, câu trả lời tôi đưa ra JavaScript. Đây là một giải thích JavaScript của một chức năng PHP.

    – Hoàng Ngọc Lệ 06:04:01 23/01/2014
  • 1

    @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.

    – Hoàng Thiên Ân 17:12:01 13/02/2014
  • 1

    @ernix - Được rồi, nhưng vấn đề là nó thực hiệ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 tôi duy trì và tôi đã nói điều này trước đây) và khi đưa ra các 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ệ với phpjs.org hoặc xem họ có phiên bản cập nhật không.

    – Hoàng Cao Sơn 20:06:27 13/02/2014
66

Đây là một biến thể của câu trả lời của @ mikez302, nhưng được sửa đổi để hỗ trợ các số có số thập phân (phản hồi của mỗi @ neu-rah đó là sốWithCommas (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] : "");
}
|
57
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
|
45

Sử dụng biểu thức chính quy

function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(toCommas(123456789)); // 123,456,789

console.log(toCommas(1234567890)); // 1,234,567,890
console.log(toCommas(1234)); // 1,234

Sử dụng toLocaleString ()

var number = 123456.789;

// request a currency format
console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ¥123,457

// limit to three significant digits
console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
// → 1,23,000

tham chiếu MDN: Number.prototype.toLocaleString ()

Sử dụng Intl.NumberFormat ()

var number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "¥123,457"

// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));

// expected output: "1,23,000"

ref Intl.NumberFormat

DEMO TẠI ĐÂY

<script type="text/javascript">
  // Using Regular expression
  function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  function commas() {
    var num1 = document.myform.number1.value;

    // Using Regular expression
    document.getElementById('result1').value = toCommas(parseInt(num1));
    // Using toLocaleString()

    document.getElementById('result2').value = parseInt(num1).toLocaleString('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    });

    // Using Intl.NumberFormat()
    document.getElementById('result3').value = new Intl.NumberFormat('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    }).format(num1);
  }
</script>
<FORM NAME="myform">
  <INPUT TYPE="text" NAME="number1" VALUE="123456789">
  <br>
  <INPUT TYPE="button" NAME="button" Value="=>" onClick="commas()">
  <br>Using Regular expression
  <br>
  <INPUT TYPE="text" ID="result1" NAME="result1" VALUE="">
  <br>Using toLocaleString()
  <br>
  <INPUT TYPE="text" ID="result2" NAME="result2" VALUE="">
  <br>Using Intl.NumberFormat()
  <br>
  <INPUT TYPE="text" ID="result3" NAME="result3" VALUE="">

</FORM>

Hiệu suất

http://jsben.ch/sifRd

|
  • 1

    Điều này không hoạt động nếu bạn đang gõ động. Nếu bạn chỉ cung cấp cho nó một giá trị thì nó hoạt động, nhưng nếu bạn đang cung cấp một giá trị liên tục một cách linh hoạt thì dấu phẩy được thêm vào sai vị trí.

    – Trịnh Mộng Long 22:46:43 16/08/2018
  • 1

    Tôi đã cập nhật bản demo bên dưới câu trả lời của tôi. Khi nhập một giá trị động trong một hộp văn bản. bạn thử dùng thử @EdgarQuintero

    – Bùi Khánh Vi 01:32:33 17/08/2018
33

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
|
31

Cảm ơn tất cả mọi người đã trả lời. Tôi đã xây dựng một số câu trả lời để đưa ra giải pháp "một cỡ vừa cho tất cả".

Đoạn mã đầu tiên thêm một chức năng bắt chước PHP của number_format()nguyên mẫu Số. Nếu tôi định dạng một số, tôi thường muốn các vị trí thập phân để hàm lấy số vị trí thập phân để hiển thị. Một số quốc gia sử dụng dấu phẩy làm số thập phân và số thập phân làm dấu phân cách hàng nghìn để chức năng cho phép các dấu phân cá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 điều này 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 lấy lại số cho các phép toán, nhưng parseFloat chuyển đổi 5.000 thành 5, chỉ cần lấy chuỗi giá trị nguyên đầu tiên. Vì vậy, tôi đã tạo chức năng chuyển đổi float của riêng mình 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
|
21

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

/\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.

|
  • 1

    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 cá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"

    – Đỗ Diễm Thúy 10:49:31 22/07/2015
  • 1

    Hoạt động tốt cho tiền tệ mặc dù! Chỉ cần làm tròn các chữ số của bạn trước khi thêm dấu phẩy.

    – Hoàng Mạnh Cường 18:04:07 18/09/2015
  • 1

    Nó thêm, sau điểm thập phân: 12.3456 ".replace (/ \ B (? = (\ D {3}) + \ b) / g,", ") == 12.3,456

    – Dương Thanh Ngọc 10:06:39 09/06/2017
18

Number.prototype.toLocaleString()sẽ thật tuyệt vời nếu nó được cung cấp nguyên bản 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 dường như không có ai trả lời nó. Đây là một poc hướng tới đó, mà thực sự là sự kết hợp của hai câu trả lời đầu tiên; nếu toLocaleStringhoạ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));

|
  • 1

    Xin lưu ý rằng polyfill chỉ hoạt động với các số có nhiều nhất là 3 số thập phân. Ví dụ: 0.12345sẽ xuất 0.12,345. Một triển khai tốt cho việc này có thể được tìm thấy trong dấu gạch dưới. Chuỗi

    – Ngô Ngọc Hạ 14:20:07 28/02/2017
  • 1

    bạn đã đúng, đặt một value > 1000điều kiện nếu điều kiện khắc phục 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, cảm ơn vì đã chỉ ra.

    – Lý Triều Thành 19:28:37 28/02/2017
  • 1

    Nó không đủ để đặt value > 1000, bởi vì nó sẽ giống nhau cho bất kỳ số nào và hơn 3 số thập phân. ví dụ 1000.12345trả về 1,000.12,345. Câu trả lời của bạn là tuyệt vời và đi đúng hướng, nhưng chỉ là không đầy đủ. Tôi chỉ cố gắng chỉ ra cho những người khác có thể vấp phải câu trả lời của bạn và chỉ sao chép / dán nó mà không kiểm tra với dữ liệu đầu vào khác nhau.

    – Dương Minh Quang 07:59:07 01/03/2017
  • 1

    Được rồi, điều này cần một chỉnh sửa khác :) Tôi đồng ý, nhưng bây giờ ít nhất nó sẽ hoạt động cho hầu hết các trường hợp.

    – Trịnh Chí Bảo 22:17:11 01/03/2017
15

Dấu phân cách hàng nghìn có thể được chèn theo cách thân thiện quốc tế bằng cách sử dụng Intlđối tượng của trình duyệ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 trên NumberFormat để biết thêm, bạn có thể chỉ định hành vi ngôn ngữ hoặc mặc định cho người dùng. Đây là một chút ngu ngốc 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ó sẵn 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ó thời gian để thực hiện.

|
13

Bạn có thể sử dụng thủ tục này để định dạng tiền tệ của bạn cần.

var nf = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
nf.format(123456.789); // ‘$123,456.79’

Để biết thêm thông tin bạn có thể truy cập liên kết này.

https://www.justinmccandless.com/post/formatted-currency-in-javascript/

|
12

nếu bạn đang xử lý các giá trị tiền tệ và định dạng rất nhiều thì có thể đáng để thêm hạch toán kế toán nhỏ xử lý nhiều trường hợp cạnh và bản địa hóa:

// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00

// European formatting (custom symbol and separators), could also use options object as second param:
accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99

// Negative values are formatted nicely, too:
accounting.formatMoney(-500000, "£ ", 0); // £ -500,000

// Simple `format` string allows control of symbol position [%v = value, %s = symbol]:
accounting.formatMoney(5318008, { symbol: "GBP",  format: "%v %s" }); // 5,318,008.00 GBP
|
11

Đoạn mã sau sử dụng quét char, do đó không có regex.

function commafy( num){
  var parts = (''+(num<0?-num:num)).split("."), s=parts[0], L, i=L= s.length, o='';
  while(i--){ o = (i===0?'':((L-i)%3?'':',')) 
                  +s.charAt(i) +o }
  return (num<0?'-':'') + o + (parts[1] ? '.' + parts[1] : ''); 
}

Nó cho thấy hiệu suất đầy hứa hẹn: http://jsperf.com/number-formatted-with-commas/5

2015.4.26: Sửa lỗi nhỏ để giải quyết vấn đề khi num <0. Xem https://jsfiddle.net/runsun/p5tqqvs3/

|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.