수천 개의 구분 기호로 쉼표로 JavaScript 에서 정수를 인쇄하려고합니다 . 예를 들어 숫자 1234567을 "1,234,567"로 표시하려고합니다. 어떻게하면 되나요?

내가하고있는 방법은 다음과 같습니다.

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

더 간단하거나 우아한 방법이 있습니까? 그것이 float와 함께 작동한다면 좋을 것이지만, 그것은 필요하지 않습니다. 마침표와 쉼표를 결정하기 위해 로케일마다 다를 필요는 없습니다.

Kerry의 답변에서 아이디어를 사용했지만 특정 목적을 위해 간단한 것을 찾고 있었기 때문에 단순화했습니다. 여기 내가 한 일이 있습니다.

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

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

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0,        "0");
failures += !test(100,      "100");
failures += !test(1000,     "1,000");
failures += !test(10000,    "10,000");
failures += !test(100000,   "100,000");
failures += !test(1000000,  "1,000,000");
failures += !test(10000000, "10,000,000");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

정규식은 두 가지 미리보기 어설 션을 사용합니다.

• 문자열에서 그 뒤에 한 행에 3 자리의 배수가있는 점을 찾는 양수
• 점이 정확히 3 자리의 배수 만 갖도록하는 부정적 주장. 대체 표현식은 쉼표를 넣습니다.

예를 들어, 그것을 전달 123456789.01하면 긍정 주장은 7의 왼쪽에있는 모든 자리와 일치합니다 ( 7893 자리 678의 배수, 3 자리의 배수 567등). 부정 어설 션은 3 자리의 배수에 그 뒤에 숫자가 없는지 확인합니다. 789그 뒤에 마침표가 있으므로 정확히 3 자리의 배수이므로 쉼표가 나타납니다. 678는 3 자리의 배수이지만 그 9뒤에는 있으므로 3 자리는 4 개 그룹의 일부이며 쉼표는 가지 않습니다. 마찬가지로 567. 4567896 자리이며 3의 배수이므로 쉼표가 그 앞에옵니다. 3456783의 배수이지만 그 9뒤에는 쉼표가 없습니다. 등등. 그만큼\B 정규식이 문자열의 시작 부분에 쉼표를 넣지 않도록합니다.

@ neu-rah 는 소수점 뒤에 3 자리 이상이 있으면이 기능이 바람직하지 않은 곳에 쉼표를 추가한다고 언급했습니다. 이것이 문제인 경우이 기능을 사용할 수 있습니다.

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

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

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0              , "0");
failures += !test(0.123456       , "0.123456");
failures += !test(100            , "100");
failures += !test(100.123456     , "100.123456");
failures += !test(1000           , "1,000");
failures += !test(1000.123456    , "1,000.123456");
failures += !test(10000          , "10,000");
failures += !test(10000.123456   , "10,000.123456");
failures += !test(100000         , "100,000");
failures += !test(100000.123456  , "100,000.123456");
failures += !test(1000000        , "1,000,000");
failures += !test(1000000.123456 , "1,000,000.123456");
failures += !test(10000000       , "10,000,000");
failures += !test(10000000.123456, "10,000,000.123456");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

@ tjcrowder 는 이제 JavaScript가 lookbehind ( support info )를 가졌으므로 정규 표현식 자체에서 해결할 수 있다고 지적했습니다 .

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

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

function test(x, expect) {
    const result = numberWithCommas(x);
    const pass = result === expect;
    console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);
    return pass;
}

let failures = 0;
failures += !test(0,               "0");
failures += !test(0.123456,        "0.123456");
failures += !test(100,             "100");
failures += !test(100.123456,      "100.123456");
failures += !test(1000,            "1,000");
failures += !test(1000.123456,     "1,000.123456");
failures += !test(10000,           "10,000");
failures += !test(10000.123456,    "10,000.123456");
failures += !test(100000,          "100,000");
failures += !test(100000.123456,   "100,000.123456");
failures += !test(1000000,         "1,000,000");
failures += !test(1000000.123456,  "1,000,000.123456");
failures += !test(10000000,        "10,000,000");
failures += !test(10000000.123456, "10,000,000.123456");
if (failures) {
    console.log(`${failures} test(s) failed`);
} else {
    console.log("All tests passed");
}

.as-console-wrapper {
    max-height: 100% !important;
}

(?<!\.\d*)은 일치 항목 앞에 .0 개 이상의 숫자가 올 수 없다는 부정적인 표시입니다. 음수 룩 베어는 V8에서 splitand join솔루션 ( 비교 ) 보다 빠릅니다 .

아무도 Number.prototype.toLocaleString을 언급하지 않은 것에 놀랐습니다 . JavaScript 1.5 (1999 년에 도입)로 구현되었으므로 기본적으로 모든 주요 브라우저에서 지원됩니다.

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

또한 Intl 을 포함하여 v0.12부터 Node.js에서 작동합니다.

이 함수는 숫자가 아닌 문자열을 반환합니다.

다른 것을 원한다면 Numeral.js 가 흥미로울 것입니다.

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

⚠ 자바 스크립트의 최대 정수 값은 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 는 지원되지 않음) :

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

내가 확인한 것 (적어도 Firefox)에서 성능과 관련하여 거의 동일합니다.

phpjs.org의 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);
}

02/13/14 업데이트

사람들은 이것이 예상대로 작동하지 않는다고보고 했으므로 자동화 된 테스트가 포함 된 JS Fiddle을 했습니다.

2017 년 11 월 26 일 업데이트

출력이 약간 수정 된 스택 스 니펫으로서의 바이올린은 다음과 같습니다.

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

이것은 @ mikez302의 답변의 변형이지만 소수 자릿수를 지원하도록 수정되었습니다 (@ neu-rah의 피드백에 따라 numberWithCommas (12345.6789)-> "12,345.6789"대신 "12,345.6,789")

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

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

정규 표현식 사용

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

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

ref MDN : Number.prototype.toLocaleString ()

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

여기 데모

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

공연

http://jsben.ch/sifRd

국제 번호 형식

기본 JS 기능. IE11, Edge, 최신 Safari, Chrome, Firefox, Opera, iOS의 Safari 및 Android의 Chrome에서 지원됩니다.

var number = 3500;

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

답장을 보내 주셔서 감사합니다. 좀 더 "한 사이즈에 맞는"솔루션을 만들기 위해 일부 답변을 작성했습니다.

첫 번째 조각은 모방하는 기능을 추가 PHP가 의 number_format()숫자 프로토 타입을. 숫자 서식을 지정하는 경우 일반적으로 소수점 이하 자릿수가 필요하므로 함수는 소수점 이하 자릿수를 표시합니다. 일부 국가에서는 쉼표를 소수점으로, 소수를 천 단위 구분 기호로 사용하므로이 구분 기호를 설정할 수 있습니다.

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

다음과 같이 사용하십시오.

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

필자는 종종 수학 연산을 위해 숫자를 다시 가져와야한다는 것을 알았지 만 parseFloat는 5,000에서 5로 변환하여 정수 값의 첫 번째 시퀀스를 취합니다. 그래서 나는 내 자신의 float 변환 함수를 만들고 그것을 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));
}

이제 다음과 같이 두 기능을 모두 사용할 수 있습니다.

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

이 질문에 대한 답변의 수가 매우 인상적입니다. 나는 uKolka 의 답변을 좋아합니다 .

n.toLocaleString()

그러나 불행히도 스페인어와 같은 일부 로켈에서는 10,000 미만의 숫자에 대해 예상대로 작동하지 않습니다 (IMHO).

Number(1000).toLocaleString('ES-es')

부여 1000하지 1.000.

참조 toLocaleString는 모든 브라우저에서 적은 10,000 이상의 숫자에 작동하지 않는 이유를 알고.

그래서 Elias Zamaria 의 대답을 사용 하여 올바른 천 단위 구분 문자를 선택해야했습니다.

n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

이것은 로케일을 사용하는 로케일 ,또는 .천 단위 구분 기호로 사용 되며 모든 경우에 1,000부터 시작합니다.

Number(1000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

1.000스페인어 로케일 컨텍스트를 제공합니다 .

숫자의 형식을 절대적으로 제어하려면 다음을 시도하십시오.

let number   = 1234.567
let decimals = 2
let decpoint = '.' // Or Number(0.1).toLocaleString().substring(1, 2)
let thousand = ',' // Or Number(10000).toLocaleString().substring(2, 3)

let n = Math.abs(number).toFixed(decimals).split('.')
n[0] = n[0].split('').reverse().map((c, i, a) =>
  i > 0 && i < a.length && i % 3 == 0 ? c + thousand : c
).reverse().join('')
let final = (Math.sign(number) < 0 ? '-' : '') + n.join(decpoint)

console.log(final)

제공합니다 1,234.57.

이것은 정규 표현식이 필요하지 않습니다. toFixed먼저 원하는 소수 자릿수로 숫자를 조정 한 다음 소수점이 .있으면 소수점 주위로 나눕니다 . 그런 다음 왼쪽을 뒤집은 숫자 배열로 바꿉니다. 그런 다음 시작부터 3 자리마다 천 단위 구분 기호가 추가되고 결과가 다시 반전됩니다. 최종 결과는 두 부분의 결합입니다. 입력 번호의 부호는 Math.abs먼저 제거 된 다음 필요한 경우 다시 넣습니다.

그것은 하나의 라이너가 아니지만 훨씬 더 길고 쉽게 기능으로 바뀌지 않았습니다. 명확성을 위해 변수가 추가되었지만, 미리 알려진 경우 원하는 값으로 대체 될 수 있습니다. toLocaleString현재 로케일의 소수점과 천 단위 구분 기호에 올바른 문자를 찾는 방법으로 사용되는 표현식을 사용할 수 있습니다 (더 현대적인 Javascript가 필요함을 명심하십시오).

나는 이것이 가장 짧은 정규 표현식이라고 생각합니다.

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

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

나는 그것을 몇 개의 숫자로 확인했고 효과가있었습니다.

Number.prototype.toLocaleString()모든 브라우저 (Safari)에서 기본적으로 제공했다면 정말 좋았을 것 입니다.

다른 모든 답변을 확인했지만 아무도 그것을 채우지 않는 것 같습니다. 여기에 대한 poc가 있습니다. 실제로 처음 두 개의 대답이 결합되어 있습니다. 경우 toLocaleString그것이 사용자 정의 함수를 사용하지 않는 경우 작품은, 그것을 사용합니다.

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

브라우저의 Intl객체를 사용하여 국제적 방식으로 천 단위 구분 기호를 삽입 할 수 있습니다 .

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

자세한 내용은 MDN의 NumberFormat 관련 기사를 참조하십시오. 로캘 동작을 지정하거나 사용자를 기본값으로 지정할 수 있습니다. 이것은 로컬 차이를 존중하기 때문에 조금 더 바보입니다. 많은 국가에서 마침표를 사용하여 숫자를 구분하고 쉼표는 소수를 나타냅니다.

Intl.NumberFormat은 아직 모든 브라우저에서 사용 가능하지는 않지만 최신 Chrome, Opera 및 IE에서 작동합니다. Firefox의 다음 릴리스가이를 지원해야합니다. 웹킷에 구현 일정이없는 것 같습니다.

이 절차를 사용하여 필요한 통화를 형식화 할 수 있습니다.

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

자세한 정보는이 링크에 액세스하십시오.

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

통화 값을 다루고 형식을 많이 지정하는 경우 많은 경우와 현지화를 처리하는 작은 accounting.js 를 추가하는 것이 좋습니다 .

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

다음 코드는 char 스캔을 사용하므로 정규 표현식이 없습니다.

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] : ''); 
}

유망한 성능을 보여줍니다 : http://jsperf.com/number-formatting-with-commas/5

2015.4.26 : num <0 인 경우 문제를 해결하기위한 사소한 수정. 참조 https://jsfiddle.net/runsun/p5tqqvs3/를

천 단위 구분 기호에 쉼표를 삽입하는 간단한 함수가 있습니다. RegEx가 아닌 배열 함수를 사용합니다.

/**
 * Format a number as a string with commas separating the thousands.
 * @param num - The number to be formatted (e.g. 10000)
 * @return A string representing the formatted number (e.g. "10,000")
 */
var formatNumber = function(num) {
    var array = num.toString().split('');
    var index = -3;
    while (array.length + index > 0) {
        array.splice(index, 0, ',');
        // Decrement by 4 since we just added another unit to the array.
        index -= 4;
    }
    return array.join('');
};

예제가 포함 된 CodeSandbox 링크 : https://codesandbox.io/s/p38k63w0vq

이 코드를 사용하여 인도의 통화 형식을 처리하십시오. 다른 국가의 통화를 처리하기 위해 국가 코드를 변경할 수 있습니다.

let amount =350256.95
var formatter = new Intl.NumberFormat('en-IN', {
  minimumFractionDigits: 2,
});

// Use it.

formatter.format(amount);

산출:

3,50,256.95

Intl.NumberFormat 생성자를 사용할 수도 있습니다 . 방법은 다음과 같습니다.

 resultNumber = new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(yourNumber); 

나는이 게시물에 걸려 넘어지기 전에 이것을 썼습니다. 정규 표현식이 없으며 실제로 코드를 이해할 수 있습니다.

$(function(){
  
  function insertCommas(s) {

    // get stuff before the dot
    var d = s.indexOf('.');
    var s2 = d === -1 ? s : s.slice(0, d);

    // insert commas every 3 digits from the right
    for (var i = s2.length - 3; i > 0; i -= 3)
      s2 = s2.slice(0, i) + ',' + s2.slice(i);

    // append fractional part
    if (d !== -1)
      s2 += s.slice(d);

    return s2;

  }
  
  
  $('#theDudeAbides').text( insertCommas('1234567.89012' ) );
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theDudeAbides"></div>

var formatNumber = function (number) {
  var splitNum;
  number = Math.abs(number);
  number = number.toFixed(2);
  splitNum = number.split('.');
  splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return splitNum.join(".");
}

편집 :이 기능은 양수로만 작동합니다. 예를 들어 :

var number = -123123231232;
formatNumber(number)

출력 : "123,123,231,232"

그러나 위의 질문에 대답하면 문제 toLocaleString()가 해결됩니다.

var number = 123123231232;
    number.toLocaleString()

출력 : "123,123,231,232"

격려!

내 대답은 jQuery를 훨씬 더 합리적인 대안으로 완전히 대체하는 유일한 대답입니다.

function $(dollarAmount)
{
    const locale = 'en-US';
    const options = { style: 'currency', currency: 'USD' };
    return Intl.NumberFormat(locale, options).format(dollarAmount);
}

이 솔루션은 쉼표를 추가 할뿐만 아니라 $(1000.9999)$ 1,001.00 와 같은 금액을 입력 할 경우 가장 가까운 페니로 반올림합니다 . 또한 입력 한 값은 숫자 나 문자열 일 수 있습니다. 중요하지 않습니다.

돈을 다루고 있지만 금액에 선행 달러 기호를 표시하지 않으려면이 함수를 추가하면됩니다.이 함수는 이전 함수를 사용하지만 다음을 제거합니다 $.

function no$(dollarAmount)
{
    return $(dollarAmount).replace('$','');
}

당신이 있다면 하지 돈을 처리하고, 소수 서식 요구 사항을 다양한있다, 여기에 더 기능이 다양한입니다 :

function addCommas(number, minDecimalPlaces = 0, maxDecimalPlaces = Math.max(3,minDecimalPlaces))
{
    const options = {};
    options.maximumFractionDigits = maxDecimalPlaces;
    options.minimumFractionDigits = minDecimalPlaces;
    return Intl.NumberFormat('en-US',options).format(number);
}

아, 그리고이 코드가 일부 이전 버전의 Internet Explorer에서는 작동하지 않는다는 사실은 완전히 의도적입니다. 현대 표준을 지원하지 않는 IE를 잡으려고 할 때마다 IE를 중단하려고합니다.

의견 섹션에서 과도한 칭찬은 주제를 벗어난 것으로 간주됩니다. 대신, 그냥 투표로 날 샤워.

나에게 가장 좋은 대답은 일부 회원이 말한 것처럼 toLocaleString을 사용하는 것입니다. '$'기호를 포함하려면 languaje를 추가하고 옵션을 입력하십시오. 멕시코 페소로 숫자를 형식화하는 예제는 다음과 같습니다.

var n = 1234567.22
alert(n.toLocaleString("es-MX",{style:"currency", currency:"MXN"}))

지름길

1234567.22.toLocaleString("es-MX",{style:"currency", currency:"MXN"})

uKolka 의 답변 을 개선하려고 노력하겠습니다. 하고 다른 사람들이 시간을 절약하도록 도와 드리겠습니다.

Numeral.js를 사용하십시오 .

document.body.textContent = numeral(1234567).format('0,0');

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>

브라우저 호환성 에 문제가없는 경우에만 Number.prototype.toLocaleString ()을 사용해야합니다 .

소수점, 다른 구분 기호 및 음수를 지원하는 다른 방법입니다.

var number_format = function(number, decimal_pos, decimal_sep, thousand_sep) {
    var ts      = ( thousand_sep == null ? ',' : thousand_sep )
        , ds    = ( decimal_sep  == null ? '.' : decimal_sep )
        , dp    = ( decimal_pos  == null ? 2   : decimal_pos )

        , n     = Math.floor(Math.abs(number)).toString()

        , i     = n.length % 3 
        , f     = ((number < 0) ? '-' : '') + n.substr(0, i)
    ;

    for(;i<n.length;i+=3) {
        if(i!=0) f+=ts;
        f+=n.substr(i,3);
    }

    if(dp > 0) 
        f += ds + parseFloat(number).toFixed(dp).split('.')[1]

    return f;
}

@Jignesh Sanghani의 일부 수정은 그의 의견을 찬성하는 것을 잊지 마십시오.

이 기능이이 문제와 관련된 모든 문제를 처리 할 것이라고 생각합니다.

function commaFormat(inputString) {
    inputString = inputString.toString();
    var decimalPart = "";
    if (inputString.indexOf('.') != -1) {
        //alert("decimal number");
        inputString = inputString.split(".");
        decimalPart = "." + inputString[1];
        inputString = inputString[0];
        //alert(inputString);
        //alert(decimalPart);

    }
    var outputString = "";
    var count = 0;
    for (var i = inputString.length - 1; i >= 0 && inputString.charAt(i) != '-'; i--) {
        //alert("inside for" + inputString.charAt(i) + "and count=" + count + " and outputString=" + outputString);
        if (count == 3) {
            outputString += ",";
            count = 0;
        }
        outputString += inputString.charAt(i);
        count++;
    }
    if (inputString.charAt(0) == '-') {
        outputString += "-";
    }
    //alert(outputString);
    //alert(outputString.split("").reverse().join(""));
    return outputString.split("").reverse().join("") + decimalPart;
}

미래 Google 직원 (또는 반드시 'Google 직원'일 필요는 없음) :

위에서 언급 한 모든 솔루션은 훌륭하지만 RegExp은 그런 상황에서 사용하기가 끔찍한 일입니다.

따라서 제안 된 옵션 중 일부를 사용하거나 다음과 같이 기본적이지만 유용한 것을 작성할 수도 있습니다.

const strToNum = str => {

   //Find 1-3 digits followed by exactly 3 digits & a comma or end of string
   let regx = /(\d{1,3})(\d{3}(?:,|$))/;
   let currStr;

   do {
       currStr = (currStr || str.split(`.`)[0])
           .replace( regx, `$1,$2`)
   } while (currStr.match(regx)) //Stop when there's no match & null's returned

   return ( str.split(`.`)[1] ) ?
           currStr.concat(`.`, str.split(`.`)[1]) :
           currStr;

};

strToNum(`123`) // => 123
strToNum(`123456`) // => 123,456
strToNum(`-1234567.0987`) // => -1,234,567.0987

여기에 사용되는 정규 표현식은 상당히 간단하며 루프는 작업을 수행하는 데 걸리는 횟수를 정확하게 유지합니다.

그리고 "DRYify"코드 등을 훨씬 더 최적화 할 수 있습니다.

아직,

(-1234567.0987).toLocaleString();

(대부분의 상황에서) 훨씬 나은 선택입니다.

요점은 실행 속도 나 브라우저 간 호환성이 아닙니다.

결과 숫자를 사용자에게 표시하려는 경우 .toLocaleString () 메서드를 사용하면 웹 사이트 또는 앱 사용자 (그녀의 언어가 무엇이든)와 동일한 언어를 말할 수있는 강력한 기능을 제공합니다.

ECMAScript 문서에 따른이 방법은 1999 년에 도입되었으며, 그 이유는 인터넷이 전세계 사람들을 연결하기를 희망했기 때문에 일부 "내재화"도구가 필요하다고 생각합니다.

오늘날 인터넷은 우리 모두를 연결하므로, 세상은 우리가 상상할 수있는 더 복잡한 방법 이며 인터넷에있는 우리 모두가 여기에 있다는 것을 기억하는 것이 중요합니다 .

분명히, 사람들의 다양성을 고려할 때, 우리는 다른 언어를 사용하고 다른 것들을 평가하는 등 모든 사람들에게 완벽한 UX를 보장하는 것은 불가능합니다. .

따라서 날짜, 시간, 숫자 등의 표현에 대한 특정 표준이 있으며 최종 사용자가 선호하는 형식으로 이러한 것들을 표시하는 도구가 있다는 점을 고려할 때, 그렇게 드물지 않으며 거의 ​​무책임하지 않습니다 해당 도구를 사용합니까 (특히이 데이터를 사용자에게 표시하려는 경우)?

나를 위해, .toLocaleString () 대신 RegExp을 사용하는 것은 JavaScript로 시계 응용 프로그램을 작성하고 그런 방식으로 하드 코딩하는 것과 같은 소리가 들리므로 프라하 시간 만 표시합니다. 프라하에 살지 않는 사람들)의 기본 행동에도 불구하고

new Date();

최종 사용자의 시계에 따라 데이터를 반환하는 것입니다.

_{원 라이너를 사랑하는 사람들} 을 _위한 나의 “ 진정한 ” 정규 표현식 솔루션

위의 열정적 인 선수들을 보십니까? 어쩌면 당신은 그것에서 골프를 할 수 있습니다. 여기 내 뇌졸중이 있습니다.

n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " ").replace(/(?<=\.(\d{3})+)\B/g, " ")

_{국제 단위 시스템 (International System of Units ) 이 출판물 인 " SI Brochure : International System of Units (SI) " (제 5.3 조 참조 ) 의 여덟 번째 판 (2006) 에서 언급 한 것처럼 천 단위 구분 기호 로  THIN SPACE (U + 2009)를 사용합니다 . .4.). 제 9 판 (2019) 은 공간 을 사용할 것을 제안 합니다 (§5.4.4 참조). 쉼표를 포함하여 원하는 것을 사용할 수 있습니다.}

보다.

const integer_part_only = n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ");
const fractional_part_only = n => `${n}`.replace(/(?<=\.(\d{3})+)\B/g, " F ");
const both = n => fractional_part_only(integer_part_only(n));

function demo(number) { // I’m using Chrome 74.
	console.log(`${number}
		→ "${integer_part_only(number)}" (integer part only)
		→ "${fractional_part_only(number)}" (fractional part only)
		→ "${both(number)}" (both)
	`);
}
demo(Math.random() * 10e5);
demo(123456789.01234567);
demo(123456789);
demo(0.0123456789);

어떻게 작동합니까?

정수 부분

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

• .replace(……, " I ") "나"를 넣어
  • /……/g 각각의
    • \B 인접한 두 자리의 중간
      • (?=……)올바른 부분이있는 _긍정적 인 _{루카 헤드}
        • (\d{3})+ 하나 이상의 세 자리 청크
        • \b 뒤에 마침표, 문자열의 끝과 같은 숫자가 아닌 숫자가옵니다.
      • (?<!……)_{부정적 룩 베인 드}왼쪽 부분이있는 것을 제외한
        • \.\d+ 점 다음에 숫자가 붙습니다 ( "소수 구분 기호 있음").

소수 부분

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

• .replace(……, " F ") "F"를 넣습니다
  • /……/g 각각의
    • \B 인접한 두 자리의 중간
      • (?<=……)왼쪽 부분이 _긍정적 인 _{루크 베인 드}
        • \. 소수점 구분 기호
        • (\d{3})+ 하나 이상의 3 자리 청크가 뒤 따릅니다.

캐릭터 클래스 와 경계

\d

모든 숫자 (아라비아 숫자)와 일치합니다. 에 해당합니다 [0-9].

예를 들어

• /\d/또는 /[0-9]/일치 2에 B2 is the suite number.

\b

단어 경계와 일치 . 이것은 문자와 공백 사이와 같이 단어 문자 뒤에 다른 단어 문자가 오지 않거나 앞에 오는 위치입니다. 일치하는 단어 경계는 일치에 포함되지 않습니다. 즉, 일치하는 단어 경계의 길이는 0입니다.

예 :

• /\bm/일치 m에 moon;
• /oo\b/뒤에 오는 단어 문자 이므로 ooin 과 일치하지 않습니다 .moonoon
• /oon\b/문자열의 끝이므로 단어 문자가 따르지 않기 때문에 oonin 과 일치합니다 .moonoon
• /\w\b\w/ 단어 문자 뒤에는 비 단어 문자와 단어 문자를 모두 사용할 수 없으므로 절대로 일치하지 않습니다.

\B

단어 가 아닌 경계와 일치합니다 . 이것은 이전 및 다음 문자가 동일한 유형 인 위치입니다. 둘 다 단어이거나 둘 다 단어가 아니어야합니다. 예를 들어 두 글자 사이 또는 두 공백 사이입니다. 문자열의 시작과 끝은 단어가 아닌 것으로 간주됩니다. 일치하는 단어 경계와 마찬가지로 일치하는 비 단어 경계도 일치에 포함되지 않습니다.

예를 들어

• /\Bon/일치 on하는 at noon;
• /ye\B/일치 ye에서 possibly yesterday.

브라우저 호환성

• https://caniuse.com/#feat=js-regexp-lookbehind

나는에에서는 toFixed 추가 된 Aki143S 의 솔루션입니다. 이 솔루션은 수천 구분 기호에 점을 사용하고 정밀도에 쉼표를 사용합니다.

function formatNumber( num, fixed ) { 
    var decimalPart;

    var array = Math.floor(num).toString().split('');
    var index = -3; 
    while ( array.length + index > 0 ) { 
        array.splice( index, 0, '.' );              
        index -= 4;
    }

    if(fixed > 0){
        decimalPart = num.toFixed(fixed).split(".")[1];
        return array.join('') + "," + decimalPart; 
    }
    return array.join(''); 
};

예;

formatNumber(17347, 0)  = 17.347
formatNumber(17347, 3)  = 17.347,000
formatNumber(1234563.4545, 3)  = 1.234.563,454

좋은 답변이 많습니다. 재미를 위해 또 다른 것이 있습니다.

function format(num, fix) {
    var p = num.toFixed(fix).split(".");
    return p[0].split("").reduceRight(function(acc, num, i, orig) {
        if ("-" === num && 0 === i) {
            return num + acc;
        }
        var pos = orig.length - i - 1
        return  num + (pos && !(pos % 3) ? "," : "") + acc;
    }, "") + (p[1] ? "." + p[1] : "");
}

몇 가지 예 :

format(77.03453, 2); // "77.03"
format(78436589374); // "78,436,589,374"
format(784, 4);      // "784.0000"
format(-123456);     // "-123,456"