JavaScriptによるstringとnumberの変換方法について現役エンジニアが解説【初心者向け】

JavaScriptによるstringとnumberの変換方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• 文字列型のデータとは
• 数値型のデータとは
• 文字列型を数値型に変換してみよう
• まとめ

 

文字列型のデータとは

文字列型のデータとは、変数に格納するデータが文字列のデータということになります。変数宣言時、「””」もしくは「”」で文字が囲われた状態で宣言されていた場合は文字列型で宣言していると考えるとわかりやすいと思います。

let data = "apple";
let data2 = "Apple";

余談ですが、文字列型のデータは大文字・小文字を区別するので上記の「apple」を格納しているdataと「Apple」を格納しているdata2は同じではないという扱いになります。

文字列型のデータの特徴として文字列型同士のデータを足すと以下のような形になります。

let a = "abc";
let b = "def";

console.log(a + b);

// abcdef

文字列型のデータ同士を足すと、文字列結合になります。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

数値型のデータとは

数値型のデータとは、変数に格納するデータが数値のデータということになります。

let number = 5;

ここで注意が必要なことは、

・文字列型と違い、数値を「””」もしくは「”」で囲わない
・格納する数値は半角数字にする

ということです。

数値型のデータの特徴として数値型同士のデータを足すと以下のような形になります。

let a = 5;
let b = 10;

console.log(a + b);

// 15

数値型のデータ同士を足すと、数値の足し算の結果になります。

 

文字列型を数値型に変換してみよう

それでは文字列型と数値型を足したい場合はどうすればよろしいでしょうか。
例えば以下の時です。

let a = "5";
let b = 10;

実は数値を含む文字列と数値を計算する場合、JavaScriptの「よしなに」仕様が働きます。これがどういうものかというと、

"10" + 2
// 102 ←足し算だけ文字列結合

"10" - 2
// 8

"10" * 2
// 20

"10" / 2
// 5

計算の方法によって、値の扱いが変わってしまうのです。これは意図しない処理結果（バグ）のきっかけになりうるものになるため、文字列型と数値型を計算する場合はどちらかをどちらかに型を揃えて処理を書いておいた方が安全です。

数値型に揃える場合

文字列型として宣言している変数aを数値型に変換をします。以下のようにparseFloatメソッドを実行することで変換することができます。

let a = "5";
let b = 10;

let total = parseFloat(a) + b; // aが数値型の5に変換される

console.log(total);

// 15

文字列型に揃える場合

数値型として宣言している変数bを文字列型に変換をします。以下のようにtoStringメソッドを実行することで変換することができます。

let a = "5";
let b = 10;

let total = a + b.toString(); // bが文字列型の10に変換される

console.log(total);

// 510

 

まとめ

文字列型を数値型へ変更する場合はparseFloatメソッドを実行することが変換をすることができます。数値型を文字列型へ変更する場合はtoStringメソッドを実行することが変換をすることができます。

 

監修してくれたメンター

土田隼平（つちだしゅんぺい) フリーのWebエンジニアです。 最近までは求人サービスや画像共有システム、ECサービスの開発・運用をやってました。 趣味はラジオ（特にオールナイトニッポンとJUNK）を聞くことや近所の散歩です。 今の最重要ミッションは「運動不足解消」です。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。