「parseIntとreplaceで数字からカンマを取り除く」でカンマを取り除く変換を行ったので、今回はその逆の「数値をカンマ区切り」にしていきます。
String()とreplaceを使います。
String()とは
String()を使うと「文字列」に変換することができます。
typeofで型の変化を確認してみましょう。
var num = 12345;
console.log(typeof num);
var str = String(num);
console.log(typeof str);// 結果
number
stringこのようにString()を使うことで、数値が文字列に変換されました。
※数値から文字列に変換する方法は複数あります。詳しくは「数値から文字列に変換、文字列から数値に変換【JavaScript】」をご覧ください。
String()とreplaceでカンマ区切りにする
ではここから本題。String()とreplaceを使って数値をカンマ区切りにしてみましょう。
var num = 12345678;
var after = String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
console.log(after);// 結果
12,345,678String( num )で一度文字列に変換した後、replaceを使っています。
【応用】フォーム入力内容がカンマ区切りになる
それでは上記のサンプルコードを応用して、入力した数値がカンマ区切りに変換するフォームを作ってみます。
数値以外が入力されるとエラーメッセージが表示されます。
function addComma() {
var form = document.getElementById('form');
var form_value = form.value;
if (form_value.match(/[0-9]+/g) != form_value ) {
document.getElementById('price').innerHTML = '数値以外はNGです。';
form.value = '';
} else {
var commaNum = String( form_value ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
document.getElementById('price').innerHTML = commaNum;
form.value = '';
}
}<input type="text" id="form" onchange="addComma()">
<div>金額：<span id="price"></span></div>form_value.match(/[0-9]+/g) != form_valueで数値のみの入力を受け入れる条件分岐にしています。
詳しくは「数値のみ・桁数制限ありの入力フォームを作る」で解説しています。
以上、JavaScriptでString()とreplaceを使って数値をカンマ区切りにする方法でした。
replaceについては以下の記事も参考になるかと思います。
