Javascript Тисяча розділювачів / формат рядка [дублікат]

Чи існує якась функція у Javascript для форматування числа та рядків?

Я шукаю спосіб для роздільника тисяч для рядка або цифр ... (як String.Format у c #)

Оновлення (через 7 років)

Посилання, вказане в оригінальній відповіді нижче, було помилковим. Для цього є вбудована функція, яка саме те, що пропонує кайзер нижче: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 .

Редагувати: Коментар або @ Мені подобається Серена додає наступне:

Для підтримки браузерів з неанглійською мовою, де ми все ще хочемо форматування англійською мовою, використовуйте value.toLocaleString('en'). Також працює для плаваючої крапки.

Оновлено за допомогою невідкладної підтримки відповідно до змін 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))

»Багатослівне пояснення регулярного виразу (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))

»Багатослівне пояснення регулярного виразу (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

Ви можете використовувати javascript. нижче код, він буде лише acceptчисловим та одиничнимdot

ось javascript

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

ДЕМО JSFIDDLE

PHP.js має функцію для цього під назвою number_format . Якщо ви знайомі з PHP, він працює точно так само .

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>

Все, що вам потрібно зробити, це просто насправді це :

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

Поєднання розчинів для реакції

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