JavaScriptで文字列と数値を変換する方法｜型変換の基本と注意点

文字列と数値の基本

JavaScriptにおけるデータ型の種類

JavaScriptには以下のプリミティブ型があります。

型はtypeof演算子で確認できます。

console.log(typeof "123");   // "string"
console.log(typeof 123);     // "number"
console.log(typeof true);    // "boolean"

文字列と数値の違いと扱い方

見た目が同じでも型が違うと演算の結果が変わります。これがJavaScriptで型変換が重要になる根本的な理由です。

// 数値の加算
console.log(10 + 5);      // 15（数値の加算）

// 文字列の連結
console.log("10" + "5");  // "105"（文字列の連結）

// 数値と文字列が混在すると…
console.log(10 + "5");    // "105"（数値が文字列に変換されて連結）
console.log("10" - 5);    // 5（引き算では文字列が数値に変換）

JavaScriptは+演算子で文字列と数値が混在すると「数値を文字列に変換して連結」する自動型変換が働きます。この挙動が意図しないバグの温床になります。

型変換が必要な場面（計算・入力処理・データ表示）

• フォーム入力の計算： input.valueは常にString型。数値計算の前に変換が必要
• APIレスポンスの処理： JSONの数値が文字列として渡される場合がある
• データ表示のフォーマット： 数値を「¥1,000」などの文字列表示に変換する
• URLパラメーターの処理： クエリパラメーターはすべて文字列で取得される

文字列を数値に変換する方法

parseInt関数の使い方

整数に変換する方法と注意点

parseInt()は文字列を整数に変換します。第2引数に基数（進数）を指定できます。

// 基本的な使い方
console.log(parseInt("42"));        // 42
console.log(parseInt("42.7"));      // 42（小数点以下は切り捨て）
console.log(parseInt("42px"));      // 42（先頭の数字部分だけ変換）
console.log(parseInt("px42"));      // NaN（先頭が数字でない場合）
console.log(parseInt(""));          // NaN（空文字）

// 第2引数で基数（進数）を指定
console.log(parseInt("ff", 16));    // 255（16進数として変換）
console.log(parseInt("11", 2));     // 3（2進数として変換）
console.log(parseInt("77", 8));     // 63（8進数として変換）

推奨： parseInt()は必ず第2引数（基数）を指定してください。省略すると先頭が「0x」の場合に16進数として解釈されるなど意図しない変換が起きることがあります。

parseFloat関数の使い方

小数を含む数値に変換する方法

parseFloat()は文字列を浮動小数点数（小数を含む数値）に変換します。

// 基本的な使い方
console.log(parseFloat("3.14"));       // 3.14
console.log(parseFloat("3.14abc"));    // 3.14（先頭の数値部分だけ変換）
console.log(parseFloat("abc3.14"));    // NaN（先頭が数字でない）
console.log(parseFloat("1.5e3"));      // 1500（指数表記に対応）
console.log(parseFloat(""));          // NaN（空文字）

// parseIntとの比較
console.log(parseInt("3.14"));         // 3（整数に切り捨て）
console.log(parseFloat("3.14"));       // 3.14（小数を保持）

Number関数を使った変換

Number()は文字列全体を数値に変換します。parseInt・parseFloatと異なり、文字列全体が有効な数値でない場合はNaNを返します。

// 基本的な使い方
console.log(Number("42"));        // 42
console.log(Number("3.14"));      // 3.14
console.log(Number("42px"));      // NaN（部分一致は許可されない）
console.log(Number(""));          // 0（空文字は0に変換される）
console.log(Number(" "));         // 0（空白のみも0）
console.log(Number(true));        // 1
console.log(Number(false));       // 0
console.log(Number(null));        // 0
console.log(Number(undefined));   // NaN

JavaScriptのNumber型の詳細な仕様と変換挙動はこちらの記事で詳しく確認できます。

単項演算子（+）を使った簡易変換

変数の前に+を付けるだけでNumber()と同じ変換が行われます。コードが簡潔になる反面、可読性が下がるため使いどころを選びます。

// 単項+演算子での変換
console.log(+"42");        // 42
console.log(+"3.14");      // 3.14
console.log(+"42px");      // NaN
console.log(+"");          // 0
console.log(+true);        // 1
console.log(+false);       // 0
console.log(+null);        // 0
console.log(+undefined);   // NaN

// 実際の使用例
const input = "100";
const value = +input;  // Number(input)と同じ
console.log(value + 50);  // 150

変換時のエラーやNaNの扱い

変換に失敗した場合はNaN（Not a Number）が返されます。NaNの特徴として、自分自身と等しくないという性質があるため、判定にはisNaN()またはNumber.isNaN()を使います。

const result = Number("abc");

// NaNの判定方法
console.log(result === NaN);          // false（NaN === NaN は常にfalse）
console.log(isNaN(result));           // true
console.log(Number.isNaN(result));    // true（より厳密な判定）

// isNaNとNumber.isNaNの違い
console.log(isNaN("abc"));           // true（文字列を数値変換してからチェック）
console.log(Number.isNaN("abc"));    // false（変換せず型チェックも行う）

// 安全な変換パターン
function safeNumber(value) {
  const num = Number(value);
  return Number.isNaN(num) ? 0 : num;  // NaNなら0を返す
}

console.log(safeNumber("42"));   // 42
console.log(safeNumber("abc"));  // 0（NaNの代わりに0を返す）

数値を文字列に変換する方法

toStringメソッドの使い方

toString()は数値オブジェクトのメソッドで、数値を文字列に変換します。引数に基数を指定することで2進数・16進数表現の文字列を生成できます。

// 基本的な使い方
const num = 255;
console.log(num.toString());      // "255"（デフォルトは10進数）
console.log(num.toString(2));     // "11111111"（2進数）
console.log(num.toString(8));     // "377"（8進数）
console.log(num.toString(16));    // "ff"（16進数）

// 小数の変換
const float = 3.14;
console.log(float.toString());    // "3.14"

// 注意：リテラルに直接呼び出す場合はドットが2つ必要
console.log((42).toString());     // "42"
// console.log(42.toString());    // SyntaxError（構文エラー）

String関数を使った変換

String()関数はあらゆる型を文字列に変換します。nullやundefinedにも安全に使えるため、型が不明な値を文字列化する場面に適しています。

console.log(String(42));          // "42"
console.log(String(3.14));        // "3.14"
console.log(String(true));        // "true"
console.log(String(false));       // "false"
console.log(String(null));        // "null"
console.log(String(undefined));   // "undefined"
console.log(String(NaN));         // "NaN"

// toStringとの比較
const value = null;
// value.toString();              // TypeError（nullにはtoStringメソッドがない）
String(value);                   // "null"（安全に変換できる）

テンプレートリテラルを使った文字列化

バッククォートで囲んだテンプレートリテラルに変数を埋め込む方法で、数値を含む表示文字列を作成する場面で最もよく使われます。

const price = 1980;
const quantity = 3;

// テンプレートリテラルで文字列化
console.log(`価格: ${price}円`);           // "価格: 1980円"
console.log(`合計: ${price * quantity}円`); // "合計: 5940円"

// 変数そのものを文字列化
const numStr = `${42}`;
console.log(typeof numStr);  // "string"
console.log(numStr);          // "42"

// 数値フォーマットと組み合わせる
const bigNum = 1234567;
const formatted = bigNum.toLocaleString('ja-JP');
console.log(`売上: ${formatted}円`);  // "売上: 1,234,567円"

文字列・数値変換の応用例

フォーム入力値の計算処理

HTMLフォームのinput.valueは常にString型です。計算前に必ず数値変換が必要です。フォーム入力値の型変換と実践的な処理方法はこちらの記事も参考になります。

// HTMLフォームの例
// <input type="text" id="price" value="1980">
// <input type="text" id="quantity" value="3">

const priceInput = document.getElementById('price').value;
const quantityInput = document.getElementById('quantity').value;

// 変換なしの場合（文字列連結になる）
console.log(priceInput + quantityInput);   // "19803"（意図しない結果）

// 正しい変換後の計算
const price = Number(priceInput);
const quantity = Number(quantityInput);

if (Number.isNaN(price) || Number.isNaN(quantity)) {
  console.error("有効な数値を入力してください");
} else {
  const total = price * quantity;
  console.log(`合計金額: ${total.toLocaleString('ja-JP')}円`);
  // "合計金額: 5,940円"
}

APIデータの型変換

外部APIから取得したJSONデータでは、数値が文字列として渡されることがあります。

// APIレスポンスの例（文字列型の数値が混在）
const apiResponse = {
  id: "101",
  name: "商品A",
  price: "2980",
  stock: "15",
  rating: "4.5"
};

// データを適切な型に変換
const product = {
  id: parseInt(apiResponse.id, 10),
  name: apiResponse.name,
  price: Number(apiResponse.price),
  stock: parseInt(apiResponse.stock, 10),
  rating: parseFloat(apiResponse.rating)
};

console.log(product.price * product.stock);  // 44700（正しく計算できる）
console.log(typeof product.price);           // "number"

配列やオブジェクト内のデータ操作

配列内の文字列数値を一括変換して計算する方法です。

// 文字列数値の配列
const strScores = ["85", "92", "78", "96", "88"];

// map()で一括変換
const numScores = strScores.map(Number);
console.log(numScores);  // [85, 92, 78, 96, 88]

// 合計・平均を計算
const total = numScores.reduce((sum, score) => sum + score, 0);
const average = total / numScores.length;

console.log(`合計: ${total}`);             // "合計: 439"
console.log(`平均: ${average.toFixed(1)}`); // "平均: 87.8"

// フィルタリング：NaNを除外して変換
const mixedData = ["80", "abc", "90", "", "75"];
const validScores = mixedData
  .map(Number)
  .filter(n => !Number.isNaN(n) && n !== 0);
console.log(validScores);  // [80, 90, 75]

小数・整数を混在させた計算処理

JavaScriptの浮動小数点計算では精度の問題が発生する場合があります。

// 浮動小数点の精度問題
console.log(0.1 + 0.2);          // 0.30000000000000004（誤差が生じる）
console.log(0.1 + 0.2 === 0.3);  // false

// 対策1：toFixed()で小数点桁数を指定してから変換
const result = (0.1 + 0.2).toFixed(1);
console.log(result);              // "0.3"（文字列）
console.log(Number(result));      // 0.3（数値に戻す）

// 対策2：整数に変換してから計算（金額計算に有効）
const price = 980;     // 円単位で計算
const taxRate = 10;    // 10%
const tax = Math.round(price * taxRate / 100);
console.log(`税込: ${price + tax}円`);  // "税込: 1078円"

// 対策3：parseFloat + toFixed で丸める
function roundTo(value, decimals) {
  return parseFloat(value.toFixed(decimals));
}
console.log(roundTo(0.1 + 0.2, 1));  // 0.3

変換時の注意点

不正な文字列の扱い（NaNや空文字）

JavaScriptの型変換でNaNが発生するパターンと対処法はこちらの記事も参考になります。NaNと空文字の扱いはバグの原因になりやすいため、変換前のバリデーションが重要です。

// 危険なパターン：バリデーションなしで変換
function calcTotal(priceStr, quantityStr) {
  return Number(priceStr) * Number(quantityStr);
}
console.log(calcTotal("1000", ""));   // 0（空文字はNumber()で0になる）
console.log(calcTotal("1000", "abc")); // NaN

// 安全なパターン：変換前にバリデーション
function safeCalcTotal(priceStr, quantityStr) {
  const price = Number(priceStr);
  const quantity = Number(quantityStr);

  if (Number.isNaN(price) || Number.isNaN(quantity)) {
    throw new Error("数値に変換できない値が含まれています");
  }
  if (quantityStr.trim() === "") {
    throw new Error("数量を入力してください");
  }
  return price * quantity;
}

try {
  console.log(safeCalcTotal("1000", "3"));   // 3000
  console.log(safeCalcTotal("1000", ""));    // Error
} catch (e) {
  console.error(e.message);
}

自動型変換による意図しない挙動の回避

JavaScriptの自動型変換（暗黙の型強制）は予測しにくい動作を引き起こします。JavaScriptの自動型変換の詳細な挙動と回避策はこちらの記事で詳しく解説されています。

// 自動型変換の落とし穴
console.log(1 + "2");       // "12"（数値→文字列への暗黙変換）
console.log("3" - 1);       // 2（文字列→数値への暗黙変換）
console.log("3" * "2");     // 6（両方が数値に変換）
console.log(true + 1);      // 2（true→1に変換）
console.log(false + "1");   // "false1"（false→"false"の文字列連結）
console.log(null + 1);      // 1（null→0に変換）
console.log(undefined + 1); // NaN

// 対策：明示的な型変換を使う
const a = "10";
const b = "20";

// 意図しない文字列連結
console.log(a + b);           // "1020"

// 明示的に数値変換してから計算
console.log(Number(a) + Number(b));  // 30

// 比較演算子でも注意が必要
console.log("5" == 5);   // true（型変換あり・==は非推奨）
console.log("5" === 5);  // false（型変換なし・===を推奨）

==（等価演算子）は自動型変換を行うため、型の異なる値を比較するとtrueになる場合があります。型まで一致を確認する===（厳密等価演算子）を使う習慣をつけてください。

小数や指数表記での注意点

// 指数表記の文字列変換
console.log(Number("1e3"));       // 1000
console.log(Number("1.5e-2"));    // 0.015
console.log(parseFloat("1e3"));   // 1000

// 非常に大きな数値や小さな数値の文字列変換
const bigNum = 1e21;
console.log(String(bigNum));      // "1e+21"（指数表記の文字列になる）
console.log(bigNum.toFixed(0));   // "1000000000000000000000"（整数の文字列）

// toFixedで小数点以下の桁数を固定
const pi = 3.14159265;
console.log(pi.toFixed(2));       // "3.14"（文字列が返る）
console.log(Number(pi.toFixed(2))); // 3.14（数値に戻す）

// 0.1刻みの小数計算でよく起きる問題
for (let i = 0; i <= 1; i += 0.1) {
  // iは0.1, 0.2...と増えるが内部的には誤差が蓄積する
  console.log(parseFloat(i.toFixed(1)));  // toFixed+parseFloatで誤差を補正
}

また、JavaScriptを含むWeb開発の実践ガイドはkakiro-webでも発信しています。

まとめ

文字列と数値の型変換は基本だが重要な操作

JavaScriptの型変換はシンプルに見えて、自動型変換・NaNの扱い・浮動小数点の誤差など落とし穴が多い分野です。フォーム入力・APIデータ処理・計算処理のいずれでも型変換の正確な理解が、バグのないコードを書く基盤になります。

用途に応じてparseInt、parseFloat、Number、+演算子などを使い分ける

• parseInt(文字列, 10)： CSSのpx値など「数字で始まる文字列」から整数を取り出したいとき
• parseFloat()： 小数を含む文字列を数値に変換するとき
• Number()： 文字列全体が有効な数値かを厳密に変換するとき（フォーム入力の検証など）
• +演算子： 短く書きたいときの省略形（可読性に注意）
• toString() / String()： 数値を文字列化。nullやundefinedが混入する可能性があるときはString()を使う
• テンプレートリテラル： 数値を含む表示文字列を組み立てるとき

変換時のエラーやNaNの扱いに注意する

型変換で最も注意すべきは、変換失敗時のNaNと自動型変換による意図しない挙動の2点です。Number.isNaN()でNaNを検出し、===で型を含めた比較を行い、明示的な型変換を習慣にすることで、型に起因するバグを防ぐことができます。