JavaScriptのNumber関数で文字列を数値に変換する方法をやさしく解説!初心者でもわかる型変換の基本
生徒
「先生、JavaScriptで文字として書かれた数字を、本物の数値に変える方法ってありますか?」
先生
「いい質問だね。JavaScriptでは、Number関数を使えば、文字列を数値に変換することができますよ。」
生徒
「それって難しくないですか?何か特別なことをしないといけないんでしょうか?」
先生
「大丈夫。とってもシンプルです!実際に使い方を見ていきましょう。」
1. Number関数とは?
JavaScript(ジャバスクリプト)には、文字列(もじれつ)を数値(すうち)に変えるための便利な関数があります。それがNumber関数です。
たとえば「"123"」のような、数字っぽい文字列をそのまま使うと、計算できません。しかしNumber関数を使うと、文字列を本物の数値に変えて、たし算やひき算ができるようになります。
2. 基本的な使い方
使い方はとても簡単です。Number("文字列")と書くだけで、文字列を数値に変換できます。
たとえば、次のように使います。
let str = "456";
let num = Number(str);
console.log(num); // 456(数値として出力)
このコードでは、文字列"456"が、数値の456に変わっています。
456
3. 計算してみよう!
変換した数値は、ちゃんと計算にも使えます。次の例を見てみましょう。
let priceText = "1000";
let taxText = "80";
// 文字列を数値に変換
let price = Number(priceText);
let tax = Number(taxText);
// 合計金額を計算
let total = price + tax;
console.log("合計金額は " + total + " 円です");
合計金額は 1080 円です
もしこの変換をしないままだと、文字列同士の結合(けつごう)になって、"100080"のようになってしまいます。
4. 変換できない場合はどうなる?
Number関数で文字列を数値に変換しようとしても、変換できない文字列もあります。たとえば、文字や記号などが混じっている場合です。
let text = "abc123";
let result = Number(text);
console.log(result);
NaN
NaN(ナン)とは「Not a Number(ナンバーじゃない)」の略で、「数値として扱えませんよ」という意味の特別な値です。
5. 空の文字列やスペースだけの場合
空の文字列や、スペースだけの文字列をNumber関数に渡すと、どうなるでしょうか?
console.log(Number("")); // 0
console.log(Number(" ")); // 0(スペースもOK)
0
0
実はこれ、数値の0として変換されるんです。これはちょっと意外ですよね。
6. 小数やマイナスの数値もOK
Number関数は、小数(しょうすう)やマイナスの数もちゃんと変換できます。
console.log(Number("-3.14")); // -3.14
console.log(Number("0.5")); // 0.5
-3.14
0.5
このように、Number関数は幅広いパターンの数値に対応しています。
7. よくあるミスと注意点
数値に変換する際によくある間違いは、文字列の中にカンマ(,)が入っているパターンです。
let str = "1,000";
console.log(Number(str)); // NaN になる!
NaN
カンマは取り除いてから変換する必要があります。カンマを削除するには、replaceという機能を使います。
let str = "1,000";
let cleaned = str.replace(",", "");
console.log(Number(cleaned)); // 1000
1000
8. Number関数とparseIntの違いは?
Number関数の他にも、parseIntという関数があります。こちらも文字列を数値に変換することができますが、違いがあります。
console.log(Number("10.5")); // 10.5(小数のまま)
console.log(parseInt("10.5")); // 10(小数点以下は切り捨て)
10.5
10
小数をそのまま扱いたいときはNumberを使いましょう。