【JavaScript】number_format 3桁区切りでカンマを入れる
問題
JavaScriptで、phpのnumber_fomat() みたいに3桁区切りでカンマを入れたいです。
答え
関数を自作する場合。小数や区切り文字など考慮した高機能版。
function number_format(number, decimals, decPoint, thousandsSep) {
// php.js を参考に
number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
var n = !isFinite(+number) ? 0 : +number
var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
var sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
var dec = (typeof decPoint === 'undefined') ? '.' : decPoint
var s = ''
var toFixedFix = function (n, prec) {
var k = Math.pow(10, prec)
return '' + (Math.round(n * k) / k).toFixed(prec)
}
// @todo: for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).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)
}
関数を自作する場合2。整数が渡される前提で正規表現で簡単に。(小数点以下が4桁以上あると小数点以下にもカンマがつくので注意)
function number_format(num) {
return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}
関数を自作する場合3。 整数が渡される前提で正規表現で簡単に。(小数点以下が3桁以上あると小数点以下にもカンマがつくので注意)
function number_format(n) {
return String(n).split(/(?=(?:\d{3})+(?:\.|$))/g).join( "," )
}
IE11以上なら、Number.prototype.toLocaleString()が使える
(12345678).toLocaleString()
let x = 9876543
x.toLocaleString('en')
IE11以上なら、Intl.NumberFormatが使える
// 普通に使う
new Intl.NumberFormat('us').format(12345678)
// 関数を定義して
const number_format = new Intl.NumberFormat('us').format
// 関数を使う
number_format(3456789)