JavaScriptを使う上で、数値と文字列の変換は非常によく行う操作です。
フォームから入力された値を計算に使ったり、計算結果を画面に表示する際などに必要になります。
この記事では、JavaScriptにおける数値から文字列への変換方法について、初心者向けにわかりやすく解説していきます。
基本的な使い方から、実用的なテクニックまでしっかり押さえましょう！
- 未経験からWebエンジニアとして転職成功（年収 30% アップ）
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
数値を文字列に変換する基本 – String()とtoString()
JavaScriptで数値を文字列に変換するには、大きく分けて2つの方法があります。
- String()関数を使う方法
- toString()メソッドを使う方法
まずはそれぞれの基本的な使い方を見ていきましょう。
String()関数
String()関数は、引数に指定した値を文字列に変換します。数値を引数に渡せば、文字列に変換されるわけです。
let num = 123;
let str = String(num);
console.log(str); // "123"
console.log(typeof str); // "string"typeof演算子で変数strの型を確認すると、”string”（文字列）になっているのがわかります。
toString()メソッド
数値のtoString()メソッドを呼び出しても、文字列に変換することができます。
let num = 123;
let str = num.toString();
console.log(str); // "123"
console.log(typeof str); // "string"この2つの方法は、ほとんどの場合で同じ結果になります。String()は「関数」、toString()は「メソッド」という違いがありますが、数値を文字列に変換するという目的においてはどちらを使っても問題ありません。
数値変換時の注意点 – undefinedとnull
数値に限らず、undefinedとnullを文字列変換する場合の挙動は要注意です。
String(undefined); // "undefined"
String(null); // "null"
undefined.toString(); // TypeError: Cannot read property 'toString' of undefined
null.toString(); // TypeError: Cannot read property 'toString' of nullString()関数は、undefinedとnullをそれぞれ"undefined"、"null"という文字列に変換します。
一方、undefinedとnullはオブジェクトではないため、toString()メソッドを直接呼び出すとエラーになってしまうので注意しましょう。
カンマ区切りの数値を変換する
金額表示などでは、"1,234,567"のようにカンマ区切りの数値文字列を使うことがよくあります。これを数値として扱う場合、一工夫必要になります。
まずはカンマ区切りの文字列を数値に変換してみましょう。単純にNumber()関数やparseInt()関数を使うと…
let strNum = "1,234,567";
console.log(Number(strNum)); // NaN
console.log(parseInt(strNum)); // 1数値としては正しく変換されません。これを回避するには、変換前にカンマを取り除く必要があります。
let strNum = "1,234,567";
let num = Number(strNum.replace(/,/g, ''));
console.log(num); // 1234567
console.log(typeof num); // "number"replace()メソッドと正規表現を使ってカンマを削除してから、Number()関数で数値に変換しています。これで正しく変換できました。
逆に、数値をカンマ区切りの文字列に変換するには、toLocaleString()メソッドを使うのが簡単です。
let num = 1234567;
let strNum = num.toLocaleString();
console.log(strNum); // "1,234,567"小数点以下の桁数を指定して文字列に変換する
小数点以下の数値を文字列に変換する際、桁数を指定したいことがあります。そんな時はtoFixed()メソッドが便利です。
let num = 123.456789;
console.log(num.toFixed(3)); // "123.457"
console.log(num.toFixed(6)); // "123.456789"toFixed()メソッドは、引数に指定した桁数で小数点以下を丸めた文字列を返します。引数を省略すると、小数点以下が切り捨てられます。
数値変換時のエラーを防ぐテクニック
文字列から数値への変換がうまくいかない場合、NaN（Not a Number）が返ってきます。
let str = "123px";
let num = Number(str);
console.log(num); // NaN変換がうまくいったかどうかを確認するには、isNaN()関数を使います。
let str = "123px";
let num = Number(str);
if (isNaN(num)) {
console.log("数値ではありません！");
} else {
console.log("数値です！");
}isNaN()関数は、引数がNaNの場合にtrueを返します。これを使って、変換結果が数値かどうかを判定できます。
数値変換に関するエラーチェックを行うことで、予期せぬバグを防ぐことができるでしょう。
まとめ
この記事では、JavaScriptにおける数値から文字列への変換方法について解説しました。
- 基本的な変換方法として、
String()関数とtoString()メソッドがある undefinedやnullの変換には注意が必要- カンマ区切りの数値文字列は、正規表現で処理すると便利
- 小数点以下の桁数を指定するなら
toFixed()メソッドを使う - 変換がうまくいかない場合は、
isNaN()関数でチェック
数値と文字列の変換は、JavaScriptプログラミングでは頻繁に行われる操作です。様々なケースに対応できるよう、これらの方法をしっかりと身につけておきましょう。
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
