【初心者向け】JavaScript文字列を数値に変換する3つの方法

みなさん、JavaScriptで文字列と数値の変換に困ったことはありませんか？

「ユーザーが入力した文字列を数値として計算したいけど、どうすればいいの？」「parseInt()とNumber()って何が違うの？」

こんな疑問を抱いている方は多いのではないでしょうか。でも大丈夫です！

この記事では、JavaScript文字列を数値に変換する3つの主要な方法を初心者向けに詳しく解説します。それぞれの特徴と使い分けから、実践的な使用例まで、文字列と数値の変換をマスターしましょう。

一緒に学んでいけば、きっとスッキリ理解できますよ！

なぜ文字列から数値への変換が必要なの？

JavaScriptの型による違い

JavaScriptでは、データ型の違いによって計算結果が変わることがあります。

// 文字列同士の場合
console.log("5" + "3"); // "53"（文字列の連結）

// 数値同士の場合
console.log(5 + 3); // 8（数値の加算）

最初の例では、文字列「5」と「3」を足すと「53」になります。これは数値の計算ではなく、文字列の連結が行われているからです。

2番目の例では、数値の5と3を足すと8になります。これが私たちが期待する計算結果ですよね。

この違いを理解することで、適切な変換が必要な場面を判断できます。

実際によくある場面

文字列から数値への変換が必要な主な場面をご紹介します。

ユーザー入力の処理（フォームの数値入力）
APIから取得したデータの処理
CSV・JSONデータの処理
計算処理の実行
条件分岐での数値比較

これらの場面で正しく変換できれば、意図した通りの処理を実現できます。ユーザーが入力フォームに「100」と入力した時、それを数値として扱いたいケースがたくさんありますよね。

方法1: Number()関数 - 一番安全で確実

Number()の基本的な使い方

Number()関数は、最も汎用的で安全な変換方法です。

let str1 = "123";
let str2 = "45.67";
let str3 = "0";

console.log(Number(str1)); // 123
console.log(Number(str2)); // 45.67
console.log(Number(str3)); // 0

このコードでは、3つの異なる文字列を数値に変換しています。「123」は整数の123に、「45.67」は小数の45.67に、「0」は数値の0に変換されます。

この方法は、整数・小数点数の両方に対応しており、最も推奨される変換方法です。

Number()の便利な特徴

Number()関数の主な特徴をご紹介しますね。

厳密な変換：完全に数値として解釈できない場合はNaNを返す
小数点対応：小数点数も正確に変換
空文字列対応：空文字列は0に変換
前後の空白除去：文字列の前後の空白は自動的に除去

console.log(Number("  123  ")); // 123（空白除去）
console.log(Number("")); // 0（空文字列）
console.log(Number("123abc")); // NaN（無効な文字列）
console.log(Number("abc")); // NaN（数値でない文字列）

「123abc」のように、数値でない文字が含まれている場合はNaN（Not a Number）が返されます。これは「数値ではない」という意味で、エラーを示しています。

安全に使うためのコツ

Number()でNaNが返された場合の処理方法をご紹介します。

function safeNumberConvert(str) {
    let result = Number(str);
    
    if (isNaN(result)) {
        console.log("変換に失敗しました: " + str);
        return 0; // デフォルト値
    }
    
    return result;
}

console.log(safeNumberConvert("123")); // 123
console.log(safeNumberConvert("abc")); // 0（エラー処理）

この関数では、まずNumber()で変換を試みます。もし結果がNaNだった場合は、エラーメッセージを表示してデフォルト値の0を返します。

isNaN()関数を使って、変換が成功したかチェックしています。このようにエラーハンドリングを行うことで、プログラムが止まることを防げます。

方法2: parseInt()関数 - 整数だけが欲しいとき

parseInt()の基本的な使い方

parseInt()関数は、整数部分のみを抽出する変換方法です。

let str1 = "123";
let str2 = "45.67";
let str3 = "123abc";

console.log(parseInt(str1)); // 123
console.log(parseInt(str2)); // 45（小数部分は無視）
console.log(parseInt(str3)); // 123（数値でない部分は無視）

parseInt()の特徴は、文字列の先頭から数値として解釈できる部分までを整数として取得することです。

「45.67」の場合、小数点以下の「.67」は無視されて45になります。「123abc」の場合、「abc」の部分は無視されて123になります。

この方法は、整数だけが必要な場面で便利です。

進数の指定が重要

parseInt()では、進数を指定することができます。

// 10進数（推奨：常に指定する）
console.log(parseInt("123", 10)); // 123

// 16進数
console.log(parseInt("FF", 16)); // 255

// 8進数
console.log(parseInt("77", 8)); // 63

// 2進数
console.log(parseInt("1010", 2)); // 10

進数の指定は必須です。第2引数に10を指定することで、10進数として解釈されます。

16進数の「FF」は10進数の255に相当します。 2進数の「1010」は10進数の10に相当します。

省略すると予期しない結果になる場合があるので、必ず指定しましょう。

parseInt()の注意点

parseInt()の主な特徴と注意点をご紹介します。

// 整数のみ取得
console.log(parseInt("123.45", 10)); // 123

// 先頭の数値のみ取得
console.log(parseInt("123abc456", 10)); // 123

// 先頭が数値でない場合はNaN
console.log(parseInt("abc123", 10)); // NaN

// 空文字列の場合はNaN
console.log(parseInt("", 10)); // NaN

// 前後の空白は除去される
console.log(parseInt("  123  ", 10)); // 123

「123abc456」のような場合、先頭の「123」だけが取得されます。しかし「abc123」のように先頭が数値でない場合は、NaNが返されます。

この特性を理解して使い分けることが大切です。

方法3: parseFloat()関数 - 小数点も大切にしたいとき

parseFloat()の基本的な使い方

parseFloat()関数は、小数点数を含む数値を抽出する変換方法です。

let str1 = "123.45";
let str2 = "67.89abc";
let str3 = "123";

console.log(parseFloat(str1)); // 123.45
console.log(parseFloat(str2)); // 67.89（数値でない部分は無視）
console.log(parseFloat(str3)); // 123（整数として取得）

parseFloat()は、parseInt()と似ていますが、小数点以下も正確に取得します。「123.45」はそのまま123.45として取得されます。

「67.89abc」の場合、「abc」部分は無視されて67.89が取得されます。整数の「123」も正しく123として取得されます。

この方法は、小数点数を正確に取得したい場合に適しています。

parseFloat()の便利な機能

parseFloat()の主な特徴をご紹介します。

// 小数点数の正確な取得
console.log(parseFloat("3.14159")); // 3.14159

// 先頭の数値のみ取得（小数点含む）
console.log(parseFloat("3.14abc")); // 3.14

// 整数も正確に取得
console.log(parseFloat("100")); // 100

// 指数表記も対応
console.log(parseFloat("1.23e+2")); // 123
console.log(parseFloat("1.23e-2")); // 0.0123

// 先頭が数値でない場合はNaN
console.log(parseFloat("abc3.14")); // NaN

指数表記（科学的記数法）にも対応しているのが特徴です。「1.23e+2」は1.23×10^2で123を意味します。

「1.23e-2」は1.23×10^-2で0.0123を意味します。科学計算でよく使われる表記も正しく変換できます。

parseInt()とparseFloat()の使い分け

let testStr = "123.45abc";

console.log(parseInt(testStr, 10)); // 123（整数部分のみ）
console.log(parseFloat(testStr)); // 123.45（小数点含む）
console.log(Number(testStr)); // NaN（厳密変換で失敗）

同じ文字列「123.45abc」に対して、3つの方法で異なる結果が得られます。

parseInt()は整数部分の123のみを取得します。 parseFloat()は小数点を含む123.45を取得します。 Number()は「abc」が含まれているため、厳密変換でNaNになります。

目的に応じて適切な関数を選択することが重要です。

3つの方法の比較：どれを選ぶべき？

わかりやすい比較表

各変換方法の特徴を比較してみましょう。

入力値	Number()	parseInt()	parseFloat()
"123"	123	123	123
"123.45"	123.45	123	123.45
"123abc"	NaN	123	123
"abc123"	NaN	NaN	NaN
""	0	NaN	NaN
" 123 "	123	123	123

この表を見ると、それぞれの特徴がよくわかりますね。

Number()は最も厳密で、完全な数値文字列のみを変換します。 parseInt()とparseFloat()は、部分的な数値も取得できます。

実際の使い分けの例

適切な変換方法を選ぶための指針をご紹介します。

// Number(): 厳密な変換が必要な場合
function validateAge(input) {
    let age = Number(input);
    if (isNaN(age) || age < 0 || age > 150) {
        return false;
    }
    return true;
}

// parseInt(): 整数部分のみが必要な場合
function getPageNumber(input) {
    let page = parseInt(input, 10);
    return isNaN(page) ? 1 : Math.max(1, page);
}

// parseFloat(): 小数点数が必要な場合
function getPrice(input) {
    let price = parseFloat(input);
    return isNaN(price) ? 0 : Math.max(0, price);
}

年齢の検証では、厳密な変換が必要なのでNumber()を使います。ページ番号では、整数のみが必要なのでparseInt()を使います。価格では、小数点が重要なのでparseFloat()を使います。

それぞれの用途に最適な方法を選ぶことで、正確な処理ができます。

実際のプロジェクトで使ってみよう

フォーム入力の処理

HTMLフォームからの入力を処理する例をご紹介します。

function calculateTotal() {
    // 入力値を取得
    let priceInput = document.getElementById('price').value;
    let quantityInput = document.getElementById('quantity').value;
    
    // 数値に変換
    let price = parseFloat(priceInput);
    let quantity = parseInt(quantityInput, 10);
    
    // バリデーション
    if (isNaN(price) || isNaN(quantity)) {
        alert('正しい数値を入力してください');
        return;
    }
    
    if (price < 0 || quantity < 0) {
        alert('正の数値を入力してください');
        return;
    }
    
    // 計算実行
    let total = price * quantity;
    document.getElementById('total').textContent = total.toFixed(2);
}

この関数では、価格と数量を掛け算して合計を計算しています。

価格は小数点があり得るのでparseFloat()を使います。数量は整数なのでparseInt()を使います。

変換後は必ずバリデーションを行って、無効な値をチェックしています。最後にtoFixed(2)で小数点以下2桁まで表示します。

APIデータの処理

APIから取得したデータを処理する例をご紹介します。

function processApiData(data) {
    return data.map(item => {
        return {
            id: parseInt(item.id, 10),
            name: item.name,
            price: parseFloat(item.price),
            stock: parseInt(item.stock, 10),
            rating: parseFloat(item.rating)
        };
    }).filter(item => {
        // 不正なデータを除外
        return !isNaN(item.id) && 
               !isNaN(item.price) && 
               !isNaN(item.stock) && 
               !isNaN(item.rating);
    });
}

APIから取得したデータは、通常文字列として送られてきます。各フィールドを適切な型に変換してから、不正なデータを除外しています。

// 使用例
let apiResponse = [
    { id: "1", name: "商品A", price: "1000.50", stock: "10", rating: "4.5" },
    { id: "2", name: "商品B", price: "2000", stock: "5", rating: "3.8" },
    { id: "invalid", name: "商品C", price: "abc", stock: "0", rating: "5.0" }
];

let processedData = processApiData(apiResponse);
console.log(processedData);

3番目のデータは、idとpriceが無効なので除外されます。このように、データの品質を保つことができます。

簡単な計算機能

文字列から数値への変換を使った計算機能をご紹介します。

function calculate(expression) {
    // 簡単な計算式の解析
    let parts = expression.split(/([+\-*/])/);
    
    if (parts.length !== 3) {
        throw new Error('無効な計算式です');
    }
    
    let num1 = Number(parts[0].trim());
    let operator = parts[1].trim();
    let num2 = Number(parts[2].trim());
    
    if (isNaN(num1) || isNaN(num2)) {
        throw new Error('数値が無効です');
    }
    
    switch (operator) {
        case '+':
            return num1 + num2;
        case '-':
            return num1 - num2;
        case '*':
            return num1 * num2;
        case '/':
            if (num2 === 0) {
                throw new Error('0で割ることはできません');
            }
            return num1 / num2;
        default:
            throw new Error('無効な演算子です');
    }
}

この関数では、「10 + 5」のような文字列を受け取って計算します。正規表現で演算子を区切り文字として分割し、それぞれを数値に変換しています。

// 使用例
try {
    console.log(calculate("10 + 5")); // 15
    console.log(calculate("20 / 4")); // 5
    console.log(calculate("abc + 5")); // エラー
} catch (error) {
    console.log(error.message);
}

エラーハンドリングも含めて、安全な計算機能を実現しています。

よくある間違いを避けよう

自動変換に頼る危険性

JavaScriptの自動型変換に頼るのは危険です。

// 間違った方法：自動変換に頼る
function badAddition(a, b) {
    return a + b; // 文字列連結になる可能性
}

console.log(badAddition("5", "3")); // "53"（意図しない結果）

// 正しい方法：明示的に変換
function goodAddition(a, b) {
    return Number(a) + Number(b);
}

console.log(goodAddition("5", "3")); // 8（正しい結果）

最初の関数では、文字列が渡されると文字列連結になってしまいます。 2番目の関数では、明示的に数値に変換してから計算しています。

このように、明確に意図を示すことが大切です。

NaNのチェックを忘れる問題

変換結果のチェックを忘れるとエラーの原因になります。

// 間違った方法：NaNをチェックしない
function badCalculation(input) {
    let num = Number(input);
    return num * 2; // NaN * 2 = NaN
}

// 正しい方法：NaNをチェックする
function goodCalculation(input) {
    let num = Number(input);
    if (isNaN(num)) {
        throw new Error('無効な数値です: ' + input);
    }
    return num * 2;
}

NaNのチェックを忘れると、計算結果もNaNになってしまいます。常に変換結果を確認する習慣をつけましょう。

進数指定を忘れる問題

parseInt()で進数を指定しないと予期しない結果になることがあります。

// 間違った方法：進数を指定しない
console.log(parseInt("08")); // 環境によって8または0

// 正しい方法：進数を指定する
console.log(parseInt("08", 10)); // 8（常に10進数として解釈）

古いブラウザでは、「08」が8進数として解釈されることがありました。必ず第2引数で進数を指定しましょう。

安全で使いやすい変換関数を作ろう

汎用的な変換関数

安全で再利用可能な変換関数をご紹介します。

// 安全な数値変換関数
function safeToNumber(value, defaultValue = 0) {
    // null、undefinedの場合
    if (value == null) {
        return defaultValue;
    }
    
    // 既に数値の場合
    if (typeof value === 'number') {
        return isNaN(value) ? defaultValue : value;
    }
    
    // 文字列の場合
    if (typeof value === 'string') {
        let trimmed = value.trim();
        if (trimmed === '') {
            return defaultValue;
        }
        
        let result = Number(trimmed);
        return isNaN(result) ? defaultValue : result;
    }
    
    // その他の型の場合
    let result = Number(value);
    return isNaN(result) ? defaultValue : result;
}

この関数は、どんな値でも安全に数値に変換できます。変換に失敗した場合は、指定したデフォルト値を返します。

// 使用例
console.log(safeToNumber("123")); // 123
console.log(safeToNumber("abc", -1)); // -1
console.log(safeToNumber(null, 100)); // 100
console.log(safeToNumber("  456  ")); // 456

様々な入力値に対して、安全に変換できています。

バリデーション付き変換

入力値の検証を含む変換関数をご紹介します。

function validateAndConvert(value, options = {}) {
    let {
        min = Number.NEGATIVE_INFINITY,
        max = Number.POSITIVE_INFINITY,
        integer = false,
        defaultValue = null
    } = options;
    
    let num = safeToNumber(value, defaultValue);
    
    if (num === null) {
        return { success: false, error: '無効な値です', value: null };
    }
    
    if (integer && !Number.isInteger(num)) {
        return { success: false, error: '整数である必要があります', value: null };
    }
    
    if (num < min || num > max) {
        return { success: false, error: `${min}から${max}の範囲で入力してください`, value: null };
    }
    
    return { success: true, error: null, value: num };
}

この関数では、変換だけでなく値の範囲や整数かどうかもチェックします。結果はオブジェクトで返され、成功・失敗とエラーメッセージが含まれます。

// 使用例
let result1 = validateAndConvert("25", { min: 0, max: 100, integer: true });
console.log(result1); // { success: true, error: null, value: 25 }

let result2 = validateAndConvert("150", { min: 0, max: 100 });
console.log(result2); // { success: false, error: "0から100の範囲で入力してください", value: null }

このような関数を用意しておくと、フォームの入力チェックなどで重宝します。

まとめ：文字列から数値への変換をマスターしよう

JavaScript文字列を数値に変換する3つの方法は、それぞれ異なる特徴と用途を持っています。

今回学習した内容をまとめると以下の通りです。

Number(): 厳密で安全な変換、バリデーションが重要な場面で使用
parseInt(): 整数部分のみが必要な場合、進数指定は必須
parseFloat(): 小数点数が必要な場合、部分的な変換が可能

使い分けのポイント：

目的に応じて適切な方法を選ぶことが大切です。

厳密な変換が必要 → Number()
整数だけが欲しい → parseInt()
小数点も大切 → parseFloat()

実践でのコツ：

実際のプロジェクトでは、以下を心がけましょう。

常にエラーハンドリングを行う
NaNのチェックを忘れない
汎用的な変換関数を作る
バリデーションを含める

適切な変換方法を選択することで、予期しないエラーを防ぎ、正確な処理を実現できます。特に、ユーザー入力やAPIデータの処理では、適切なバリデーションとエラーハンドリングが欠かせません。

実際のプロジェクトでは、安全性と使いやすさを両立した汎用的な変換関数を作成することをおすすめします。これらの基礎をマスターして、より堅牢なJavaScriptアプリケーションを作成してみませんか？

ぜひ今日から、これらの変換メソッドを使った実践的なプログラムに挑戦してみてください！

【初心者向け】JavaScript文字列を数値に変換する3つの方法

【初心者向け】JavaScript文字列を数値に変換する3つの方法

なぜ文字列から数値への変換が必要なの？

JavaScriptの型による違い

実際によくある場面

方法1: Number()関数 - 一番安全で確実

Number()の基本的な使い方

Number()の便利な特徴

安全に使うためのコツ

方法2: parseInt()関数 - 整数だけが欲しいとき

parseInt()の基本的な使い方

進数の指定が重要

parseInt()の注意点

方法3: parseFloat()関数 - 小数点も大切にしたいとき

parseFloat()の基本的な使い方

parseFloat()の便利な機能

parseInt()とparseFloat()の使い分け

3つの方法の比較：どれを選ぶべき？

わかりやすい比較表

実際の使い分けの例

実際のプロジェクトで使ってみよう

フォーム入力の処理

APIデータの処理

簡単な計算機能

よくある間違いを避けよう

自動変換に頼る危険性

NaNのチェックを忘れる問題

進数指定を忘れる問題

安全で使いやすい変換関数を作ろう

汎用的な変換関数

バリデーション付き変換

まとめ：文字列から数値への変換をマスターしよう

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説