【JavaScript】数値を文字列に変換する方法｜String・toString・テンプレートリテラルの使い分け完全ガイド

この記事で学べること

• JavaScriptで数値を文字列に変換する全7つの方法とそれぞれの特徴
• String()・toString()・テンプレートリテラルの正しい使い分け
• toFixed()・toLocaleString()・Intl.NumberFormatによる数値フォーマット
• 2進数・8進数・16進数への基数変換テクニック
• NaN・Infinity・BigIntなど特殊な数値の扱い方
• 金額表示・電話番号・0埋めなど実務パターン集
• 各方法のパフォーマンス比較と最適な選択フローチャート

ポイント：この記事はJavaScript初心者から中級者まで幅広く対応しています。基本的な変換方法から高度なフォーマット、実務で役立つパターンまで段階的に解説していますので、目次から必要な部分にジャンプしてお読みください。

// カウンターの値をDOM要素に表示する
const count = 42;
const element = document.getElementById('counter');

// textContentは自動変換されるが、明示的に変換するのがベストプラクティス
element.textContent = String(count); // "42"

// inputのvalueに設定する場合
const input = document.querySelector('#price-input');
input.value = String(1980); // "1980"

// data属性に数値を設定する場合
const item = document.querySelector('.product');
item.dataset.price = String(2500); // "2500"

const itemCount = 5;
const totalPrice = 12800;

// テンプレートリテラル（推奨）
const message = `商品${itemCount}点、合計${totalPrice}円です`;
// → "商品5点、合計12800円です"

// + 演算子で結合する場合
const message2 = '商品' + itemCount + '点、合計' + totalPrice + '円です';
// → "商品5点、合計12800円です"

// 注意: 数値同士の + は加算になる
const bad = 5 + 3 + '円';  // "8円"（5+3=8 が先に計算される）
const good = '' + 5 + 3 + '円'; // "53円"（文字列結合になる）

// APIに送るデータを構築
const userId = 12345;
const zipCode = 1050001; // 本来は "105-0001"

const payload = {
  user_id: String(userId),     // "12345"
  zip_code: String(zipCode),   // "1050001"
  amount: String(9800),          // "9800"
};

// fetch でAPI送信
fetch('/api/order', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
});

// フォームから値を取得して計算
const priceInput = document.querySelector('#price');
const quantityInput = document.querySelector('#quantity');
const totalOutput = document.querySelector('#total');

// フォームの値は文字列なので、数値に変換して計算
const price = Number(priceInput.value);
const quantity = Number(quantityInput.value);
const total = price * quantity;

// 計算結果をフォームに設定（数値→文字列）
totalOutput.value = String(total);

// 金額フォーマットして表示する場合
const display = document.querySelector('#total-display');
display.textContent = total.toLocaleString() + '円';
// → "12,800円"

const score = 9850;
const level = 12;

// localStorageに保存（自動的に文字列に変換される）
localStorage.setItem('highScore', String(score));
localStorage.setItem('level', String(level));

// 取得時は文字列なので、数値に戻す
const savedScore = Number(localStorage.getItem('highScore'));
// → 9850 (number型)

// オブジェクトを保存する場合はJSON.stringifyを使う
const data = { score: 9850, level: 12, time: 180.5 };
localStorage.setItem('gameData', JSON.stringify(data));

const page = 3;
const limit = 20;
const categoryId = 15;

// URLSearchParams を使う方法（推奨）
const params = new URLSearchParams({
  page: String(page),
  limit: String(limit),
  category: String(categoryId)
});

const url = `/api/products?${params}`;
// → "/api/products?page=3&limit=20&category=15"

数値→文字列変換が必要な主な場面まとめ

• DOM操作: textContent、innerHTML、inputのvalue設定
• 文字列結合: ユーザー向けメッセージの生成
• API通信: JSONデータの構築、リクエストパラメータ
• フォーム処理: 計算結果のフォームへの反映
• ストレージ: localStorage/sessionStorageへの保存
• URL構築: クエリパラメータの設定
• ログ出力: console.logでのデバッグ表示

// 基本構文
String(値)

// 整数の変換
String(42);      // "42"
String(0);       // "0"
String(-7);      // "-7"
String(100);     // "100"

// 小数の変換
String(3.14);    // "3.14"
String(0.001);   // "0.001"
String(-2.5);    // "-2.5"

// 大きな数値
String(1000000); // "1000000"
String(1e6);      // "1000000"（指数表記が展開される）
String(1e20);     // "100000000000000000000"
String(1e21);     // "1e+21"（大きすぎると指数表記のまま）

実行結果

"42"  "0"  "-7"  "100"  "3.14"  "0.001"  "-2.5"  "1000000"  "1e+21"

// 特殊な数値
String(NaN);       // "NaN"
String(Infinity);  // "Infinity"
String(-Infinity); // "-Infinity"

// null と undefined（String() の強み）
String(null);      // "null"
String(undefined); // "undefined"

// ブーリアン
String(true);      // "true"
String(false);     // "false"

// -0（マイナスゼロ）
String(-0);        // "0"（注意: マイナスが消える）

注意：String(-0)は"0"を返します。マイナスゼロを正確に文字列に変換したい場合は、Object.is(value, -0) ? "-0" : String(value)のように判定が必要です。

// String() — プリミティブ文字列を返す（推奨）
const str1 = String(42);
console.log(typeof str1); // "string"
console.log(str1);        // "42"

// new String() — Stringオブジェクトを返す（非推奨）
const str2 = new String(42);
console.log(typeof str2); // "object"
console.log(str2);        // String {"42"}

// 比較時に問題が発生する
String(42) === "42";      // true
new String(42) === "42";  // false（オブジェクトと文字列の比較）
new String(42) == "42";   // true（型変換が行われる）

ポイント：数値を文字列に変換する目的では、常にnewなしのString()を使いましょう。new String()はオブジェクトを生成するため、厳密等価演算子（===）での比較で意図しない結果になります。

// 1. 値がnullやundefinedの可能性がある場合
function displayValue(value) {
  return String(value); // null/undefined でも安全
}

displayValue(42);        // "42"
displayValue(null);      // "null"
displayValue(undefined); // "undefined"

// 2. 配列のmap関数で一括変換
const numbers = [1, 2, 3, 4, 5];
const strings = numbers.map(String);
// → ["1", "2", "3", "4", "5"]

// 3. 混在した配列の安全な変換
const mixed = [42, null, NaN, undefined, 0, Infinity];
const result = mixed.map(String);
// → ["42", "null", "NaN", "undefined", "0", "Infinity"]

// APIレスポンスの値を安全に文字列化
function formatApiResponse(data) {
  return {
    id: String(data.id),
    name: String(data.name),
    score: String(data.score ?? 0)
  };
}

// ログ出力のフォーマット
function logEntry(level, code, message) {
  const timestamp = Date.now();
  return [String(timestamp), String(level), String(code), message].join(' | ');
}

// switch文でのマッチング
function getStatusText(code) {
  switch (String(code)) {
    case '200': return 'OK';
    case '404': return 'Not Found';
    case '500': return 'Server Error';
    default: return 'Unknown';
  }
}

// 基本構文
数値.toString(基数)

// 基数を省略すると10進数（デフォルト）
const num = 42;
num.toString();   // "42"

// 変数を使わずリテラルから直接呼ぶ場合
(42).toString();  // "42"（括弧が必要）
42..toString();   // "42"（ドット2つでもOK）

// 各種数値
(0).toString();       // "0"
(-7).toString();      // "-7"
(3.14).toString();    // "3.14"
(1000000).toString(); // "1000000"
(1e21).toString();    // "1e+21"

注意：数値リテラルから直接toString()を呼ぶ場合、42.toString()と書くとドットが小数点と解釈されてSyntaxErrorになります。(42).toString()または42..toString()と書く必要があります。

const num = 255;

// 2進数（binary）
num.toString(2);   // "11111111"

// 8進数（octal）
num.toString(8);   // "377"

// 10進数（decimal）- デフォルト
num.toString(10);  // "255"

// 16進数（hexadecimal）
num.toString(16);  // "ff"

// 36進数（最大）
num.toString(36);  // "73"

// 色コードの例
const red = 200, green = 150, blue = 50;
const hexColor = '#' + red.toString(16).padStart(2, '0')
  + green.toString(16).padStart(2, '0')
  + blue.toString(16).padStart(2, '0');
// → "#c89632"

実行結果

255 → 2進数: "11111111"
255 → 8進数: "377"
255 → 16進数: "ff"
色コード: "#c89632"

// 正常に動作するケース
(42).toString();      // "42" ✓
(NaN).toString();     // "NaN" ✓
(Infinity).toString(); // "Infinity" ✓

// エラーになるケース
let value = null;
// value.toString(); // TypeError: Cannot read properties of null

let undef;
// undef.toString(); // TypeError: Cannot read properties of undefined

// 安全に使う方法: オプショナルチェイニング
const safeStr = value?.toString() ?? '';
// → ''（nullの場合は空文字列）

// または nullish coalescing で事前チェック
const result = (value ?? 0).toString();
// → "0"（nullの場合は0を文字列化）

ポイント：単純に数値を文字列にするだけならString()が安全です。2進数・8進数・16進数への変換が必要な場合はtoString(radix)を使いましょう。

// 基本構文: バッククォート + ${式}
const num = 42;
const str = `${num}`;
console.log(str);        // "42"
console.log(typeof str); // "string"

// 各種数値の変換
`${0}`;         // "0"
`${-7}`;        // "-7"
`${3.14}`;      // "3.14"
`${NaN}`;       // "NaN"
`${Infinity}`;  // "Infinity"
`${null}`;      // "null"
`${undefined}`; // "undefined"

const price = 1980;
const tax = 0.1;
const quantity = 3;

// 計算結果を埋め込み
const total = `合計: ${price * quantity}円`;
// → "合計: 5940円"

// 税込計算
const withTax = `税込: ${Math.floor(price * (1 + tax))}円`;
// → "税込: 2178円"

// 三項演算子も使える
const stock = 0;
const status = `在庫: ${stock > 0 ? stock + '個' : 'なし'}`;
// → "在庫: なし"

// 関数呼び出し結果の埋め込み
const formatted = `価格: ${price.toLocaleString()}円`;
// → "価格: 1,980円"

const name = '田中';
const age = 30;
const score = 95.5;

// テンプレートリテラル（読みやすい）
const msg1 = `${name}さん（${age}歳）のスコア: ${score}点`;
// → "田中さん（30歳）のスコア: 95.5点"

// + 演算子（読みにくい）
const msg2 = name + 'さん（' + age + '歳）のスコア: ' + score + '点';

// 複数行にまたがる場合
const report = `
レポート
========
名前: ${name}
年齢: ${age}
スコア: ${score}
`;

const num = 42;

// どちらもほぼ同じパフォーマンス
const a = `${num}`;       // テンプレートリテラル
const b = '' + num;        // + 演算子
const c = String(num);     // String関数
const d = num.toString();  // toStringメソッド

// 可読性の面でテンプレートリテラルが最も推奨される
// 特に文字列の中に数値を埋め込む場合

ポイント：テンプレートリテラルは可読性が高く、式の埋め込みも可能なため、文字列の中に数値を埋め込む場面では最も推奨される方法です。単純に数値だけを文字列化する場合はString()の方が意図が明確です。

// 基本構文
const str = 42 + "";
console.log(str);        // "42"
console.log(typeof str); // "string"

// 各種数値
0 + "";         // "0"
-7 + "";        // "-7"
3.14 + "";      // "3.14"
NaN + "";       // "NaN"
Infinity + "";  // "Infinity"
null + "";      // "null"
undefined + ""; // "undefined"

// 文字列 + 数値 = 文字列結合
"Price: " + 100;  // "Price: 100"

// 数値 + 数値 + 文字列 = 加算してから結合
5 + 3 + "円";     // "8円"（5+3=8, 8+"円"="8円"）

// 文字列 + 数値 + 数値 = すべて結合
"" + 5 + 3;       // "53"（""+5="5", "5"+3="53"）

// 予期しない結果のパターン
const a = 10, b = 20;
console.log("合計: " + a + b); // "合計: 1020" ← 期待と異なる！
console.log("合計: " + (a + b)); // "合計: 30" ← 括弧で解決
console.log(`合計: ${a + b}`);   // "合計: 30" ← テンプレートリテラルが安全

注意：+ ""による変換は簡潔ですが、意図が不明確になりがちです。コードレビューの観点からは、String()やテンプレートリテラルの方が意図が明確で推奨されます。

+ 演算子の型変換ステップ

1. 両方のオペランドに対してToPrimitive()を呼ぶ
2. どちらかが文字列型であれば、もう一方をToString()で文字列に変換し結合
3. どちらも文字列でなければ、両方をToNumber()で数値に変換し加算

// 基本構文: 数値.toFixed(小数桁数)
const pi = 3.14159265;

pi.toFixed(0);   // "3"
pi.toFixed(1);   // "3.1"
pi.toFixed(2);   // "3.14"
pi.toFixed(3);   // "3.142"（四捨五入）
pi.toFixed(5);   // "3.14159"

// 整数に対して使う（0埋め）
const num = 42;
num.toFixed(2);   // "42.00"
num.toFixed(4);   // "42.0000"

// 金額表示に便利
const price = 1980;
const taxRate = 0.1;
const total = price * (1 + taxRate);
total.toFixed(0);  // "2178"
total.toFixed(2);  // "2178.00"

注意：toFixed()の四捨五入は「銀行家の丸め（偶数丸め）」ではなく、浮動小数点の精度に依存します。例えば(1.005).toFixed(2)は"1.00"になります（期待値は"1.01"）。正確な金額計算にはライブラリの使用を検討してください。

// 浮動小数点の精度問題
(1.005).toFixed(2);  // "1.00" ← 期待は "1.01"
(1.015).toFixed(2);  // "1.01" ← 期待は "1.02"
(1.025).toFixed(2);  // "1.02" ← 期待通り
(1.035).toFixed(2);  // "1.04" ← 期待通り

// 原因: 1.005は内部的に 1.00499999... として保持されている
console.log(1.005.toPrecision(20));
// → "1.0049999999999998934"

// 正確な四捨五入の方法
function roundFixed(num, digits) {
  const multiplier = 10 ** digits;
  return (Math.round(num * multiplier) / multiplier).toFixed(digits);
}

roundFixed(1.005, 2);  // "1.01" ← 正確！
roundFixed(1.015, 2);  // "1.02" ← 正確！

const num = 123.456;

num.toPrecision(1);  // "1e+2"（有効1桁 → 指数表記）
num.toPrecision(2);  // "1.2e+2"（有効2桁）
num.toPrecision(3);  // "123"（有効3桁）
num.toPrecision(4);  // "123.5"（有効4桁）
num.toPrecision(5);  // "123.46"（有効5桁）
num.toPrecision(6);  // "123.456"（有効6桁）
num.toPrecision(8);  // "123.45600"（0埋め）

// 小さい数値
const small = 0.00456;
small.toPrecision(1);  // "0.005"
small.toPrecision(2);  // "0.0046"
small.toPrecision(3);  // "0.00456"

const num = 123456;

num.toExponential();   // "1.23456e+5"
num.toExponential(0);  // "1e+5"
num.toExponential(1);  // "1.2e+5"
num.toExponential(2);  // "1.23e+5"
num.toExponential(4);  // "1.2346e+5"

// 小さな数値
const tiny = 0.000123;
tiny.toExponential();   // "1.23e-4"
tiny.toExponential(1);  // "1.2e-4"
tiny.toExponential(4);  // "1.2300e-4"

// 日本円（小数なし）
function formatJPY(amount) {
  return '¥' + Math.round(amount).toLocaleString();
}

formatJPY(1980);     // "¥1,980"
formatJPY(2178.5);   // "¥2,179"

// USドル（小数2桁）
function formatUSD(amount) {
  return '$' + amount.toFixed(2);
}

formatUSD(19.99);   // "$19.99"
formatUSD(100);     // "$100.00"
formatUSD(0.5);     // "$0.50"

// パーセント表示
function formatPercent(ratio) {
  return (ratio * 100).toFixed(1) + '%';
}

formatPercent(0.156);  // "15.6%"
formatPercent(0.8);    // "80.0%"
formatPercent(1);      // "100.0%"

// 基本構文
数値.toLocaleString(ロケール, オプション)

const num = 1234567.89;

// ロケール省略（ブラウザのデフォルト）
num.toLocaleString();
// → "1,234,567.89"（日本語環境の場合）

// 日本語
num.toLocaleString('ja-JP');
// → "1,234,567.89"

// ドイツ語（小数点がカンマ、桁区切りがピリオド）
num.toLocaleString('de-DE');
// → "1.234.567,89"

// アラビア語（アラビア数字を使用）
num.toLocaleString('ar-EG');
// → "١٤٢٣٤٥٦٧"（環境による）

// インド（独自の桁区切り: 12,34,567.89）
num.toLocaleString('en-IN');
// → "12,34,567.89"

const amount = 1980;

// 日本円
amount.toLocaleString('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});
// → "¥1,980"

// USドル
amount.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD'
});
// → "$1,980.00"

// ユーロ
amount.toLocaleString('de-DE', {
  style: 'currency',
  currency: 'EUR'
});
// → "1.980,00 €"

// 中国元
amount.toLocaleString('zh-CN', {
  style: 'currency',
  currency: 'CNY'
});
// → "¥1,980.00"

const ratio = 0.156;

ratio.toLocaleString('ja-JP', {
  style: 'percent'
});
// → "16%"（四捨五入される）

ratio.toLocaleString('ja-JP', {
  style: 'percent',
  minimumFractionDigits: 1
});
// → "15.6%"

// 達成率など
(0.875).toLocaleString('ja-JP', {
  style: 'percent',
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});
// → "87.5%"

const num = 1234.5;

// 最小小数桁数
num.toLocaleString('ja-JP', {
  minimumFractionDigits: 3
});
// → "1,234.500"

// 最大小数桁数
(3.14159).toLocaleString('ja-JP', {
  maximumFractionDigits: 2
});
// → "3.14"

// 最小整数桁数（0埋め）
(42).toLocaleString('ja-JP', {
  minimumIntegerDigits: 5
});
// → "00,042"

// 有効桁数
(123456).toLocaleString('ja-JP', {
  maximumSignificantDigits: 3
});
// → "123,000"

ポイント：toLocaleString()は手軽にロケール対応のフォーマットができますが、より高度な制御が必要な場合は次のセクションで解説するIntl.NumberFormatの使用を検討してください。

// 基本構文
const formatter = new Intl.NumberFormat(ロケール, オプション);
formatter.format(数値);

// 日本語ロケール
const jpFormatter = new Intl.NumberFormat('ja-JP');
jpFormatter.format(1234567.89);
// → "1,234,567.89"

// フォーマッターを再利用できる（パフォーマンスが良い）
const numbers = [1000, 50000, 1234567];
numbers.map(n => jpFormatter.format(n));
// → ["1,000", "50,000", "1,234,567"]

// 日本円
const jpyFormat = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});
jpyFormat.format(1980);     // "¥1,980"
jpyFormat.format(50000);    // "¥50,000"
jpyFormat.format(1234567);  // "¥1,234,567"

// USドル
const usdFormat = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});
usdFormat.format(19.99);  // "$19.99"
usdFormat.format(1500);   // "$1,500.00"

// ユーロ（ドイツ語ロケール）
const eurFormat = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
});
eurFormat.format(1980);  // "1.980,00 €"

// 通貨表示の名前スタイル
const longFormat = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});
longFormat.format(1980); // "1,980円"

// パーセント表示
const percentFormat = new Intl.NumberFormat('ja-JP', {
  style: 'percent',
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});
percentFormat.format(0.156);  // "15.6%"
percentFormat.format(0.8);    // "80.0%"
percentFormat.format(1.5);    // "150.0%"

// 単位表示（ES2020+）
const kmFormat = new Intl.NumberFormat('ja-JP', {
  style: 'unit',
  unit: 'kilometer'
});
kmFormat.format(42.5); // "42.5 km"

const tempFormat = new Intl.NumberFormat('ja-JP', {
  style: 'unit',
  unit: 'celsius'
});
tempFormat.format(36.5); // "36.5°C"

const byteFormat = new Intl.NumberFormat('ja-JP', {
  style: 'unit',
  unit: 'megabyte'
});
byteFormat.format(256); // "256 MB"

// 短いコンパクト表記
const shortFormat = new Intl.NumberFormat('ja-JP', {
  notation: 'compact'
});
shortFormat.format(1500);       // "1500"
shortFormat.format(15000);      // "1.5万"
shortFormat.format(150000);     // "15万"
shortFormat.format(1500000);    // "150万"
shortFormat.format(150000000);  // "1.5億"

// 英語のコンパクト表記
const enShort = new Intl.NumberFormat('en-US', {
  notation: 'compact'
});
enShort.format(1500);     // "1.5K"
enShort.format(1500000);  // "1.5M"
enShort.format(1500000000); // "1.5B"

const fmt = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});

const parts = fmt.formatToParts(1980);
console.log(parts);
// [
//   { type: "currency", value: "¥" },
//   { type: "integer", value: "1" },
//   { type: "group", value: "," },
//   { type: "integer", value: "980" }
// ]

// 整数部分だけ取得
const integerPart = parts
  .filter(p => p.type === 'integer' || p.type === 'group')
  .map(p => p.value)
  .join('');
// → "1,980"

toLocaleString() vs Intl.NumberFormat

• 単発の変換ならtoLocaleString()が手軽
• 繰り返し使う場合はIntl.NumberFormatを生成して再利用する方がパフォーマンスが良い
• formatToParts()で部品ごとに取得したい場合はIntl.NumberFormatが必要
• 実際にはtoLocaleString()は内部的にIntl.NumberFormatを使っている

const num = 255;

// 基数2〜36を指定可能
num.toString(2);   // "11111111"   (2進数)
num.toString(3);   // "100110"     (3進数)
num.toString(8);   // "377"        (8進数)
num.toString(10);  // "255"        (10進数)
num.toString(16);  // "ff"         (16進数)
num.toString(36);  // "73"         (36進数)

// 接頭辞を付けて分かりやすくする
function toBinary(n) {
  return '0b' + n.toString(2);
}
function toOctal(n) {
  return '0o' + n.toString(8);
}
function toHex(n) {
  return '0x' + n.toString(16);
}

toBinary(255);  // "0b11111111"
toOctal(255);   // "0o377"
toHex(255);     // "0xff"

// parseInt(文字列, 基数) で数値に変換
parseInt('11111111', 2);   // 255（2進数→10進数）
parseInt('377', 8);        // 255（8進数→10進数）
parseInt('ff', 16);        // 255（16進数→10進数）

// 10進数→2進数→10進数 の往復変換
const original = 42;
const binary = original.toString(2);   // "101010"
const back = parseInt(binary, 2);     // 42

// 16進数カラーコードの操作
const color = '#ff8800';
const r = parseInt(color.slice(1, 3), 16); // 255
const g = parseInt(color.slice(3, 5), 16); // 136
const b = parseInt(color.slice(5, 7), 16); // 0

// padStart() で0埋め
function toBin8(n) {
  return n.toString(2).padStart(8, '0');
}

toBin8(0);    // "00000000"
toBin8(1);    // "00000001"
toBin8(42);   // "00101010"
toBin8(255);  // "11111111"

// 16進数の0埋め（2桁）
function toHex2(n) {
  return n.toString(16).padStart(2, '0');
}

toHex2(0);    // "00"
toHex2(10);   // "0a"
toHex2(255);  // "ff"

// RGBカラーコード変換（完全版）
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(c => c.toString(16).padStart(2, '0'))
    .join('');
}

rgbToHex(255, 136, 0);   // "#ff8800"
rgbToHex(0, 128, 255);   // "#0080ff"

// 権限管理の例
const READ = 0b0001;    // 1
const WRITE = 0b0010;   // 2
const EXECUTE = 0b0100; // 4
const ADMIN = 0b1000;   // 8

// 権限を組み合わせる
const userPerms = READ | WRITE;
userPerms.toString(2); // "11" → padStart → "0011"

const adminPerms = READ | WRITE | EXECUTE | ADMIN;
adminPerms.toString(2); // "1111"

// 権限チェックを見やすく表示
function showPermissions(perms) {
  const bits = perms.toString(2).padStart(4, '0');
  return `[${bits}] A=${bits[0]} X=${bits[1]} W=${bits[2]} R=${bits[3]}`;
}

showPermissions(userPerms);
// → "[0011] A=0 X=0 W=1 R=1"
showPermissions(adminPerms);
// → "[1111] A=1 X=1 W=1 R=1"

// NaN の生成
const nan1 = NaN;
const nan2 = Number('abc');
const nan3 = 0 / 0;
const nan4 = Math.sqrt(-1);

// 全ての変換方法で "NaN" になる
String(NaN);       // "NaN"
NaN.toString();    // "NaN"
`${NaN}`;          // "NaN"
NaN + "";         // "NaN"

// NaN判定してからフォーマット
function safeFormat(value) {
  if (Number.isNaN(value)) return 'N/A';
  return String(value);
}

safeFormat(42);   // "42"
safeFormat(NaN);  // "N/A"

String(Infinity);   // "Infinity"
String(-Infinity);  // "-Infinity"

// Infinity の生成
String(1 / 0);             // "Infinity"
String(Number.POSITIVE_INFINITY); // "Infinity"
String(Number.NEGATIVE_INFINITY); // "-Infinity"

// toFixed/toPrecisionはInfinityでエラー
// Infinity.toFixed(2); // RangeError

// 安全にフォーマットする
function formatNumber(value) {
  if (!isFinite(value)) return '-';
  return value.toFixed(2);
}

// -0 の文字列変換ではマイナスが消える
String(-0);       // "0"（！）
(-0).toString();  // "0"（！）
`${-0}`;          // "0"（！）

// -0を検出して正しく変換する方法
function stringifyWithNegZero(value) {
  if (Object.is(value, -0)) return '-0';
  return String(value);
}

stringifyWithNegZero(-0); // "-0"
stringifyWithNegZero(0);  // "0"

const big = 9007199254740993n;

// String() で変換
String(big);      // "9007199254740993"
big.toString();   // "9007199254740993"
`${big}`;         // "9007199254740993"

// 基数変換も可能
big.toString(16); // "20000000000001"
big.toString(2);  // "100000000000000000000000000000000000000000000000000001"

// 注意: BigIntはtoFixed等のメソッドを持たない
// big.toFixed(2); // TypeError

// Number.MAX_SAFE_INTEGERとの比較
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
String(Number.MAX_SAFE_INTEGER); // "9007199254740991"

// Number型では精度が失われる
String(9007199254740993); // "9007199254740992"（精度喪失！）
String(9007199254740993n); // "9007199254740993"（BigIntは正確）

const num = 12345;
const iterations = 1000000;

// テスト関数
function benchmark(name, fn) {
  const start = performance.now();
  for (let i = 0; i < iterations; i++) {
    fn();
  }
  const end = performance.now();
  console.log(`${name}: ${(end - start).toFixed(2)}ms`);
}

benchmark('String()',         () => String(num));
benchmark('toString()',       () => num.toString());
benchmark('Template literal', () => `${num}`);
benchmark('+ ""',            () => num + "");
benchmark('toFixed(0)',      () => num.toFixed(0));

一般的なベンチマーク結果（参考値）

+ "":            ~15ms（最速）
template literal: ~18ms
toString():      ~20ms
String():        ~22ms
toFixed(0):      ~45ms（最遅）

注意：パフォーマンスの差は100万回単位でも数十ミリ秒程度です。通常のアプリケーションではこの差は無視できるため、可読性・安全性を優先して選択するのがベストプラクティスです。

変換方法の選び方

1. 文字列の中に数値を埋め込む → テンプレートリテラル `${num}`
2. 値がnull/undefinedの可能性がある → String(num)
3. 2進数/8進数/16進数に変換したい → num.toString(radix)
4. 小数桁数を指定したい → num.toFixed(digits)
5. 通貨・パーセント表示 → Intl.NumberFormat
6. 桁区切りカンマ → num.toLocaleString()
7. 配列を一括変換 → numbers.map(String)
8. 単純に数値→文字列 → String(num)（最も安全）

// シンプルな金額表示
function formatPrice(price) {
  return '¥' + Math.floor(price).toLocaleString('ja-JP');
}

formatPrice(1980);    // "¥1,980"
formatPrice(50000);   // "¥50,000"
formatPrice(1234567); // "¥1,234,567"

// 税込表示付き
function formatPriceWithTax(price, taxRate = 0.1) {
  const withTax = Math.floor(price * (1 + taxRate));
  return `¥${withTax.toLocaleString('ja-JP')}（税込）`;
}

formatPriceWithTax(1980); // "¥2,178（税込）"

// Intl.NumberFormat版（推奨）
const jpyFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});
jpyFormatter.format(1980); // "¥1,980"

// 電話番号のフォーマット（文字列として扱う）
function formatPhone(phone) {
  const str = String(phone).replace(/D/g, '');
  if (str.length === 11) {
    return str.replace(/^(d{3})(d{4})(d{4})$/, '$1-$2-$3');
  }
  if (str.length === 10) {
    return str.replace(/^(d{3})(d{3})(d{4})$/, '$1-$2-$3');
  }
  return str;
}

formatPhone('09012345678'); // "090-1234-5678"
formatPhone('0312345678');  // "031-234-5678"

// padStart() を使った0埋め
function zeroPad(num, width) {
  return String(num).padStart(width, '0');
}

zeroPad(5, 3);    // "005"
zeroPad(42, 3);   // "042"
zeroPad(100, 3);  // "100"
zeroPad(7, 5);    // "00007"

// 連番生成
const items = Array.from({ length: 5 }, (_, i) => {
  return `ITEM-${String(i + 1).padStart(4, '0')}`;
});
// → ["ITEM-0001", "ITEM-0002", "ITEM-0003", "ITEM-0004", "ITEM-0005"]

function formatDate(date) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  return `${y}-${m}-${d}`;
}

formatDate(new Date(2026, 2, 8)); // "2026-03-08"

// 時刻付き
function formatDateTime(date) {
  const y = date.getFullYear();
  const mo = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  const h = String(date.getHours()).padStart(2, '0');
  const mi = String(date.getMinutes()).padStart(2, '0');
  const s = String(date.getSeconds()).padStart(2, '0');
  return `${y}-${mo}-${d} ${h}:${mi}:${s}`;
}

function formatFileSize(bytes) {
  if (bytes === 0) return '0 B';
  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  const size = bytes / (1024 ** i);
  return size.toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
}

formatFileSize(0);           // "0 B"
formatFileSize(1023);        // "1023 B"
formatFileSize(1024);        // "1.0 KB"
formatFileSize(1536000);     // "1.5 MB"
formatFileSize(1073741824);  // "1.0 GB"

function toCSV(data, headers) {
  const headerLine = headers.join(',');
  const rows = data.map(row =>
    row.map(cell => {
      const str = String(cell ?? '');
      // カンマや改行を含む場合はクォートで囲む
      return str.includes(',') || str.includes('
')
        ? `"${str}"` : str;
    }).join(',')
  );
  return [headerLine, ...rows].join('
');
}

const data = [
  [1, '商品A', 1980, 3],
  [2, '商品B', 3500, 1],
];
toCSV(data, ['ID', '商品名', '価格', '数量']);
// → "ID,商品名,価格,数量
1,商品A,1980,3
2,商品B,3500,1"

// 方法1: toLocaleString()（最も簡単）
(1234567).toLocaleString(); // "1,234,567"

// 方法2: Intl.NumberFormat（再利用向け）
const fmt = new Intl.NumberFormat('ja-JP');
fmt.format(1234567); // "1,234,567"

// 方法3: 正規表現（ライブラリなし）
function addCommas(num) {
  return String(num).replace(/B(?=(d{3})+(?!d))/g, ',');
}

addCommas(1234567);   // "1,234,567"
addCommas(100);       // "100"（3桁以下は変化なし）
addCommas(1000);      // "1,000"

function formatTimer(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  const pad = n => String(n).padStart(2, '0');
  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}

formatTimer(0);      // "00:00:00"
formatTimer(65);     // "00:01:05"
formatTimer(3661);   // "01:01:01"
formatTimer(86399);  // "23:59:59"

この記事のまとめ

• 安全で汎用的な変換ならString()を使う（null/undefinedも安全）
• 文字列への埋め込みにはテンプレートリテラル`${num}`が最も読みやすい
• 基数変換（2進数・8進数・16進数）にはtoString(radix)を使う
• 小数桁数の制御にはtoFixed()を使う（四捨五入の精度に注意）
• 通貨・パーセント・単位表示にはIntl.NumberFormatが最適
• 桁区切りにはtoLocaleString()が手軽
• 0埋めにはString(num).padStart(width, '0')を使う
• パフォーマンスの差はごくわずかなので、可読性と安全性を優先して選択する

ポイント：迷ったらString()を使いましょう。null/undefinedでもエラーにならず、意図も明確です。文字列に数値を埋め込む場面ではテンプレートリテラルが最も自然な書き方になります。