JavaScriptのNumber関数で文字列を数値に変換する方法をやさしく解説！初心者でもわかる型変換の基本

1. Number関数とは？

1. Number関数とは？

JavaScript（ジャバスクリプト）には、文字列（もじれつ）を数値（すうち）に変えるための便利な関数があります。それがNumber関数です。

たとえば「"123"」のような、数字っぽい文字列をそのまま使うと、計算できません。しかしNumber関数を使うと、文字列を本物の数値に変えて、たし算やひき算ができるようになります。

2. 基本的な使い方

2. 基本的な使い方

使い方はとても簡単です。Number("文字列")と書くだけで、文字列を数値に変換できます。

たとえば、次のように使います。

let str = "456";
let num = Number(str);
console.log(num); // 456（数値として出力）

このコードでは、文字列"456"が、数値の456に変わっています。

456

3. 計算してみよう！

3. 計算してみよう！

変換した数値は、ちゃんと計算にも使えます。次の例を見てみましょう。

let priceText = "1000";
let taxText = "80";

// 文字列を数値に変換
let price = Number(priceText);
let tax = Number(taxText);

// 合計金額を計算
let total = price + tax;
console.log("合計金額は " + total + " 円です");

合計金額は 1080 円です

もしこの変換をしないままだと、文字列同士の結合（けつごう）になって、"100080"のようになってしまいます。

4. 変換できない場合はどうなる？

4. 変換できない場合はどうなる？

Number関数で文字列を数値に変換しようとしても、変換できない文字列もあります。たとえば、文字や記号などが混じっている場合です。

let text = "abc123";
let result = Number(text);
console.log(result);

NaN

NaN（ナン）とは「Not a Number（ナンバーじゃない）」の略で、「数値として扱えませんよ」という意味の特別な値です。

5. 空の文字列やスペースだけの場合

5. 空の文字列やスペースだけの場合

空の文字列や、スペースだけの文字列をNumber関数に渡すと、どうなるでしょうか？

console.log(Number(""));      // 0
console.log(Number("   "));   // 0（スペースもOK）

0
0

実はこれ、数値の0として変換されるんです。これはちょっと意外ですよね。

6. 小数やマイナスの数値もOK

6. 小数やマイナスの数値もOK

Number関数は、小数（しょうすう）やマイナスの数もちゃんと変換できます。

console.log(Number("-3.14"));  // -3.14
console.log(Number("0.5"));    // 0.5

-3.14
0.5

このように、Number関数は幅広いパターンの数値に対応しています。

7. よくあるミスと注意点

7. よくあるミスと注意点

数値に変換する際によくある間違いは、文字列の中にカンマ（,）が入っているパターンです。

let str = "1,000";
console.log(Number(str));  // NaN になる！

NaN

カンマは取り除いてから変換する必要があります。カンマを削除するには、replaceという機能を使います。

let str = "1,000";
let cleaned = str.replace(",", "");
console.log(Number(cleaned));  // 1000

1000

8. Number関数とparseIntの違いは？

8. Number関数とparseIntの違いは？

Number関数の他にも、parseIntという関数があります。こちらも文字列を数値に変換することができますが、違いがあります。

console.log(Number("10.5"));     // 10.5（小数のまま）
console.log(parseInt("10.5"));   // 10（小数点以下は切り捨て）

10.5
10

小数をそのまま扱いたいときはNumberを使いましょう。

まとめ

まとめ

ここまで、JavaScriptにおける数値変換の基本であるNumber関数について詳しく解説してきました。Web開発やプログラミングの現場では、ユーザーがフォームに入力した値や、外部のAPIから取得したデータが「文字列」として扱われることが非常に多くあります。これらをそのまま加算しようとすると、意図しない文字列結合が発生してバグの原因となります。そのため、Number関数を使った適切な型変換をマスターすることは、初心者から脱却するための第一歩と言えるでしょう。

Number関数の重要なポイントをおさらい

記事の内容を振り返り、特に重要なポイントを整理しました。これらを意識するだけで、コードの品質は格段に上がります。

• 基本的な変換： Number("123") のように記述することで、文字列を数値型に変換できる。
• 算術演算への応用： 変換後の値は、通常の数値として加減乗除の計算が可能になる。
• NaN（Not a Number）の発生： 数字以外の文字（"abc"など）が含まれる場合、結果はNaNになる。
• 空文字の挙動： 空の文字列 "" や半角スペース " " を変換すると 0 になる特性がある。
• 小数と負の数： 浮動小数点数やマイナス記号付きの文字列も、正確に数値として認識される。
• カンマの注意点： "1,000" のようなカンマ区切りの文字列は、そのままでは変換できないため、事前に除去が必要。

実践的なサンプルコードで理解を深める

実際のアプリケーション開発を想定した、より具体的なサンプルプログラムを見てみましょう。例えば、ユーザーが入力した複数の数値の平均値を出すプログラムです。

// フォームから取得したと想定される文字列の配列
let scoresText = ["85", "92", "78", " "];

let totalScore = 0;
let count = 0;

for (let i = 0; i < scoresText.length; i++) {
    // 文字列を数値に変換
    let score = Number(scoresText[i]);

    // NaNでない、かつ0より大きい（空文字でない）場合のみ加算
    if (!isNaN(score) && scoresText[i].trim() !== "") {
        totalScore += score;
        count++;
    }
}

let average = totalScore / count;
console.log("有効な点数の合計: " + totalScore);
console.log("平均点: " + average);

実行結果は以下のようになります。

有効な点数の合計: 255
平均点: 85

このように、isNaN()関数と組み合わせることで、エラーを防ぎながら安全に数値を扱うことができます。

TypeScriptでの扱いについて

近年、JavaScriptの拡張版であるTypeScript（タイプスクリプト）を利用するケースも増えています。TypeScriptでは「型」を厳格に管理するため、Number関数の重要性がさらに増します。

function calculateAge(birthYearStr: string): number {
    const currentYear: number = new Date().getFullYear();
    const birthYear: number = Number(birthYearStr);

    if (isNaN(birthYear)) {
        throw new Error("誕生年は数値形式で入力してください。");
    }

    return currentYear - birthYear;
}

const age = calculateAge("1995");
console.log(`現在の年齢は ${age} 歳です。`);

TypeScriptを使うことで、どの変数が数値で、どの変数が文字列なのかを明確に区別できるため、Number関数による変換のタイミングがより分かりやすくなります。

今後の学習に向けて

JavaScriptにはNumber以外にも、parseIntやparseFloat、あるいは単項プラス演算子（+）を使った変換方法もあります。状況に応じてこれらを使い分けることが、プロフェッショナルなエンジニアへの近道です。まずは、最も標準的で挙動が素直なNumber関数を使いこなし、データの型を意識したプログラミングを心がけてみてください。