【JavaScript】数値を文字列として結合する方法｜型変換の仕組み・テンプレートリテラル・toString・+ 演算子の落とし穴まで解説

// 数値 + 数値 → 算術加算
console.log(1 + 2);          // 3

// 数値 + 文字列 → 文字列結合（左から評価）
console.log(1 + '2');        // '12'
console.log('1' + 2);        // '12'
console.log('価格: ' + 100); // '価格: 100'

// 複数の + が絡む場合は左から順に評価される
console.log(1 + 2 + '円');   // '3円'  （1+2=3 → '3'+'円'）
console.log('合計: ' + 1 + 2); // '合計: 12'  （'合計: '+1='合計: 1' → '合計: 1'+'2'）

// 意図通りにするには計算部分を括弧でまとめる
console.log('合計: ' + (1 + 2)); // '合計: 3'

const n = 255;

// 基本変換
console.log(String(n));        // '255'
console.log(n.toString());     // '255'

// 基数変換
console.log(n.toString(2));    // '11111111'  （2進数）
console.log(n.toString(8));    // '377'       （8進数）
console.log(n.toString(16));   // 'ff'        （16進数）

// 小数点桁数固定
console.log((3.14159).toFixed(2)); // '3.14'  ← 返り値は文字列！
console.log((1.005).toFixed(2));   // '1.00' や '1.01'（浮動小数点の誤差に注意）

// ロケール対応
console.log((1234567).toLocaleString('ja-JP'));           // '1,234,567'
console.log((9800).toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })); // '¥9,800'

const price  = 1980;
const count  = 3;
const name   = '商品A';

// 基本的な埋め込み
console.log(`${name}は${price}円です`);            // '商品Aは1980円です'

// ${ } 内で計算できる
console.log(`合計: ${price * count}円`);            // '合計: 5940円'

// メソッド呼び出しも可能
console.log(`合計: ${(price * count).toLocaleString('ja-JP')}円`); // '合計: 5,940円'

// 複数行の文字列
const receipt = `
商品: ${name}
単価: ${price.toLocaleString('ja-JP')}円
数量: ${count}
合計: ${(price * count).toLocaleString('ja-JP')}円
`.trim();
console.log(receipt);

const nums = [1, 2, 3, 4, 5];

console.log(nums.join(''));      // '12345'（区切りなし）
console.log(nums.join(', '));    // '1, 2, 3, 4, 5'
console.log(nums.join(' - '));   // '1 - 2 - 3 - 4 - 5'

// 電話番号の組み立て
const tel = [90, 1234, 5678];
console.log(tel.join('-'));      // '90-1234-5678'

// reduce での結合（join で代替できる場合は join を使う）
const result = nums.reduce((acc, n) => acc + String(n), '');
console.log(result);             // '12345'

// ─── 価格表示（3桁区切り + 円マーク）───
function formatPrice(n) {
  return `¥${n.toLocaleString('ja-JP')}`;
}
console.log(formatPrice(9800));       // '¥9,800'
console.log(formatPrice(1234567));    // '¥1,234,567'

// ─── ゼロ埋め（padStart）───
// n桁になるよう先頭に '0' を補完する
const num = 5;
console.log(String(num).padStart(3, '0'));   // '005'
console.log(String(num).padStart(5, '0'));   // '00005'

// 時刻の表示（2桁ゼロ埋め）
function fmt2(n) { return String(n).padStart(2, '0'); }
const h = 9, m = 5, s = 3;
console.log(`${fmt2(h)}:${fmt2(m)}:${fmt2(s)}`); // '09:05:03'

// ─── 小数点桁数を揃えた表示 ───
console.log((1.5).toFixed(2));       // '1.50'
console.log((100).toFixed(2));       // '100.00'

// ─── 単位付き表示 ───
function formatBytes(bytes) {
  if (bytes < 1024)       return `${bytes} B`;
  if (bytes < 1024 ** 2)  return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1024 ** 3)  return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
  return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
}
console.log(formatBytes(500));       // '500 B'
console.log(formatBytes(2048));      // '2.0 KB'
console.log(formatBytes(1572864));   // '1.5 MB'

// ─── 通貨表示 ───
const jpyFmt = new Intl.NumberFormat('ja-JP', {
  style: 'currency', currency: 'JPY'
});
console.log(jpyFmt.format(9800));     // '¥9,800'
console.log(jpyFmt.format(1234567));  // '¥1,234,567'

// ─── 小数点桁数の固定 ───
const pctFmt = new Intl.NumberFormat('ja-JP', {
  style: 'percent',
  minimumFractionDigits: 1,
  maximumFractionDigits: 1,
});
console.log(pctFmt.format(0.1234));   // '12.3%'

// ─── 単位付き（m・kg など）───
const kgFmt = new Intl.NumberFormat('ja-JP', {
  style: 'unit', unit: 'kilogram'
});
console.log(kgFmt.format(72.5));      // '72.5 kg'

// JavaScript の浮動小数点演算（IEEE 754）による誤差
console.log((1.005).toFixed(2));  // '1.00' または '1.01'（環境依存）
console.log((1.255).toFixed(2));  // '1.25' または '1.26'

// 金額計算で正確さが必要な場合の対処法
// ① 整数に変換して計算してから最後に割り算
function toFixed2(n) {
  return (Math.round(n * 100) / 100).toFixed(2);
}
console.log(toFixed2(1.005));     // '1.01'（丸め誤差を軽減）

// ② 金融計算ライブラリ（decimal.js など）を使う方法もある