JavaScript

数値をカンマ区切りにするreplace・String()【JavaScript】

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

String( 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については以下の記事も参考になるかと思います。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5