JavaScript

数字からカンマを取り除くparseIntとreplace【JavaScript】

この記事では、カンマ区切りの数字から、カンマを取り除いていきます。

parseIntとreplaceを使った方法を紹介します。

replaceについての詳細は「複数の異なる文字を置換・削除する【replace】」で解説していますのでご覧ください。

parseIntとは

まずはparseIntについてざっと解説します。

parseIntは「文字列を数値に変換」したいときに使います。

文字列と数値

例を見てみましょう。1000+2000=3000という結果が得たいとします。

var str1 = '1000';
var str2 = '2000';
console.log(str1 + str2);
// 結果
10002000

上記のように「1000」と「2000」が文字列だと計算ができず、思った結果が得られません。

1000と2000を数値に変換するためにparseIntを使います。

var str1 = '1000';
var str2 = '2000';
var result1 = parseInt( str1, 10 );
var result2 = parseInt( str2, 10 );

console.log( result1 + result2 );
// 結果
3000

上記のように文字列だった1000と2000をparseIntで数値に変換すると、計算ができるようになります。

parseInt(str, 10)の10は10進数を表します。引数を指定しないこともできますが、デフォルト値は10ではないので、指定したほうが無難です。

≫parseInt()/MDN

parseIntとreplaceでカンマを取り除く

それでは本題の「数値からカンマを取り除く方法」を見ていきましょう。

カンマを取り除くにはparseIntとreplaceを使います。

function removeComma(number) {
    var removed = number.replace(/,/g, '');
    return parseInt(removed, 10);
}

var num = '1,000,000';
var result = removeComma(num);
console.log(result);
// 結果
1000000

カンマ区切りの数字から、replaceを使ってカンマを取り除きます。

それだけだと、数字は文字列として扱われるので、parseIntを使って数値に変換しています。

parseIntを触ってみよう

上記のコードを実際に触ってみましょう。

なんとなくイメージが分かりましたでしょうか?

番外編:型はtypeofで分かる

ちなみに文字列や数値の型はtypeofを使うと分かります。

var num1 = '1000';
var num2 = 1000;
console.log(typeof num1);
console.log(typeof num2);
// 結果
string
number

数値と文字列の型の違いはプログラミングを始めたばかりのときは、なかなか気づきづらいので、「何かうまく動かないな」と思ったら、typeofで型をみてみると良いですよ。


以上、カンマ区切りの数字からカンマを取り除く方法でした。

replaceでカンマを取り除き、parseIntで数値に変換するという方法で実施しました。

正規表現についての省略は省いてしまいましたが、正規表現について詳しく知りたいという方は「JavaScriptで正規表現を触ってみる」で解説しています。

正規表現を理解すると、できることの幅がぐっと広がります。

ぜひ一度見てみてください。


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

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

ウェブつく管理人

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

-JavaScript
-,

© 2020 ウェブつく Powered by AFFINGER5