JavaScript

JavaScript初心者必見!文字列を数値に変換する簡単な方法とは?【全てのパターン解説付き】

JavaScriptは日々進化するプログラミング言語であり、Web開発においては欠かせないツールです。特に、データの型変換は頻繁に行われる操作の一つであり、文字列から数値への変換は多くの場面で必要とされます。
この記事では、JavaScriptで文字列型の数字を数値型に変換する方法を初心者にもわかりやすく解説します。

型とは

プログラミングにおいて「型」とは、データの種類を指します。
JavaScriptでは主に「数値(Number)」、「文字列(String)」、「ブーリアン(Boolean)」などがあります。型によってデータの扱い方が異なるため、型の理解はプログラミングの基礎となります。

文字列と数値とは

JavaScriptでよく使われるデータ型に「文字列」と「数値」があります。文字列はテキストデータを表し、シングルクォーテーション()やダブルクォーテーション()で囲まれた任意のテキストです。一方、数値は整数や小数点を含む数値データを指し、計算に使用されます。

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

文字列型の数字を数値型に変換する主な方法は以下の通りです。

Number() 関数

Number() 関数は、文字列が数値として解釈可能な場合、それを数値に変換します。解釈できない場合は NaN (Not a Number) を返します。

let stringValue = "123";
let numberValue = Number(stringValue);
console.log(numberValue); // 出力: 123

文字列が数値に変換不可能な場合、結果は NaN になるため、変換前に内容の検証が推奨されます。

parseInt() と parseFloat()

parseInt() は文字列を整数に、parseFloat() は文字列を浮動小数点数に変換します。文字列の先頭から数値を読み取り、数値でなくなったところで変換を停止します。

let intValue = "123px";
let floatValue = "123.45";
console.log(parseInt(intValue)); // 出力: 123
console.log(parseFloat(floatValue)); // 出力: 123.45

数値で始まらない文字列を変換しようとすると NaN を返します。また、parseInt() は小数点以下を無視します。

単項プラス+演算子

単項プラス演算子は、文字列を数値に強制変換します。非常に簡潔で読みやすい方法です。

let stringValue = "123";
let numberValue = +stringValue;
console.log(numberValue); // 出力: 123

NaN を返す可能性があるので、変換可能な文字列であることを保証する必要があります。

まとめ

文字列から数値への変換は、JavaScriptでよく行われる操作です。Number()parseInt()parseFloat()単項プラス演算子などの方法がありますが、どれを使うかは変換したいデータの形式とプロジェクトの要件に依存します。
適切な方法を選ぶことで、エラーを避け、効率的なプログラミングが可能になります。

 
※参考にされる場合は自己責任でお願いします。