数値を文字列に変換
数値を文字列に変換 とは
String / toString / テンプレリテラルで数値を文字列に変換する。本レッスンでは、数値を文字列に変換 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
数値を文字列に変換
数値を画面に表示したり、ログに残したりするときは 文字列への変換 が必要です。JavaScript では暗黙的に変換されるケースもありますが、意図して明示的に変換する ほうがバグを生みません。本レッスンでは String()、Number.prototype.toString()、テンプレートリテラル `${value}` の 3 つを押さえます。
ポイント どの方法も結果は同じ文字列になりますが、書き味と意図の伝わりやすさが違います。
String 関数
String(value) は値を文字列化する一番素直な方法です。数値はもちろん、true や null、undefined も安全に文字列化できます。String(42) は "42"、String(null) は "null"、String(undefined) は "undefined" です。例外を投げずに何でも文字列にできる 頑丈さ が魅力です。
JavaScript
console.log(String(42)); // "42"
console.log(String(3.14)); // "3.14"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"toString メソッド
数値には toString() というメソッドが生えており、(42).toString() で "42" を得られます。toString(2) のように基数を渡すと 2 進数や 16 進数表記 に変換できるのが面白いところです。(255).toString(16) は "ff" になり、色の処理などで重宝します。ただし null や undefined には toString が無いので呼ぶとエラーになる点に注意です。
JavaScript
console.log((42).toString()); // "42"
console.log((255).toString(16)); // "ff"
console.log((8).toString(2)); // "1000"注意
42.toString()はドットが数値リテラルと衝突してSyntaxErrorです。(42).toString()と括弧で囲みます。
テンプレートリテラル
`` で囲んだ文字列の中で ${value} を使うと、その式の評価結果が自動で文字列化されます。実務では一番よく使う方法で、`合計は ${total} 円` のように 文字列の組み立てと変換を同時に できます。テンプレートリテラルでは String(value) 相当の変換が走るので、null や undefined を埋め込んでもエラーになりません。
JavaScript
const total = 1100;
const msg = `合計は ${total} 円`;
console.log(msg); // "合計は 1100 円"
console.log(typeof msg); // "string"3 つの違いを整理
ヒント 文章の中に埋め込むならテンプレートリテラル、単体で文字列が欲しいなら
String()を選びます。
よくある間違い
1 つ目は value + "" のような暗黙変換を多用してしまうことです。動きますが意図が読み取りにくいので、レビューでは String(value) への置き換えを勧められることが多いです。2 つ目は null に対して toString() を呼んで TypeError になる事故。null.toString() は実行時エラーになります。3 つ目はテンプレートリテラルでオブジェクトを埋め込むと "[object Object]" になってしまう問題です。オブジェクトを表示したいときは JSON.stringify(obj) を併用しましょう。
補足 JSON 化は API 通信のデータ整形でも頻出するので、合わせて覚えておくと便利です。
Before / After で比較
暗黙変換に頼ったコードと、明示変換にしたコードを並べると意図の差がわかります。
JavaScript
// Before 暗黙の連結で文字列化
const price = 1000;
const msg = "金額は " + price + " 円";
// After テンプレートリテラルで明示
const price2 = 1000;
const msg2 = `金額は ${price2} 円`;見比べると、テンプレートリテラルのほうが文章の構造が崩れず、変数の差し込み箇所が一目でわかります。テンプレリテラルは String() 同等の安全な変換も同時に行ってくれます。
やってみよう
値を 1 つ受け取り、文字列に変換 した結果を返す関数 toText を作ってください。仕様は次のとおりです。
- どんな値でも例外を投げない
nullとundefinedも"null""undefined"という文字列にする- 内部で
String()を使うのが推奨
テンプレートリテラルを使う `${value}` でも動きますが、String() のほうが意図が明確です。
よくある質問
Q. ブラウザと Node.js で動作は変わりますか？
A. JavaScript の構文・組み込み機能（配列・文字列・Promise 等）はどちらでも同じです。違いは DOM API（ブラウザ専用）と fs などのファイル系（Node 専用）など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。
Q. ES6 以降の新機能は使っても大丈夫ですか？
A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル（Babel/Vite）が必要なケースは年々減っています。
Q. TypeScript に進む価値はありますか？
A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。
次のレッスン
次は 真偽値の変換 で、String / toString / テンプレリテラルで数値を文字列に変換する を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 数値→文字列 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 数値→文字列 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- String 関数で文字列に変換する
- どんな入力でも例外を投げない
- null や undefined もそれぞれ "null" "undefined" という文字列にする
入出力例
test-cases.txt
toText(42) → "42"
toText(3.14) → "3.14"
toText(true) → "true"
toText(null) → "null"
toText(0) → "0"