【JavaScript】number_format 3桁区切りでカンマを入れる

Tweet

Category JavaScript 2020/01/24

問題

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

関数を自作する場合２。整数が渡される前提で正規表現で簡単に。（小数点以下が4桁以上あると小数点以下にもカンマがつくので注意）

function number_format(num) {
    return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}

関数を自作する場合３。 整数が渡される前提で正規表現で簡単に。（小数点以下が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)