カテゴリ: JavaScript 更新日: 2025/07/24

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

JavaScriptのNumber関数で文字列を数値に変換する方法
JavaScriptのNumber関数で文字列を数値に変換する方法

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字として書かれた数字を、本物の数値に変える方法ってありますか?」

先生

「いい質問だね。JavaScriptでは、Number関数を使えば、文字列を数値に変換することができますよ。」

生徒

「それって難しくないですか?何か特別なことをしないといけないんでしょうか?」

先生

「大丈夫。とってもシンプルです!実際に使い方を見ていきましょう。」

1. Number関数とは?

1. Number関数とは?
1. Number関数とは?

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

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

2. 基本的な使い方

2. 基本的な使い方
2. 基本的な使い方

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

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


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

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


456

3. 計算してみよう!

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. 変換できない場合はどうなる?
4. 変換できない場合はどうなる?

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


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

NaN

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

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

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

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


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

0
0

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

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

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. よくあるミスと注意点
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の違いは?
8. Number関数とparseIntの違いは?

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


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

10.5
10

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

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New2
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
New3
JavaScript
JavaScriptの正規表現で任意の1文字(.)や文字クラスを使う方法
New4
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの配列の要素にアクセスする方法(インデックス番号の使い方)
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptの正規表現で文字列を置換する方法(replaceメソッド)