JavaScript 文字列と数値の変換

更新日：2018-12-24

JavaScriptに限らずプログラミングでよく使うのが、文字列と数値との変換です。

数値と、文字列、それぞれについての詳細は、以前の記事も参考にしてください。

JavaScript 数値と計算

JavaScript リテラル(文字列|オブジェクト|配列)

文字列と数値の比較には、次の記事も参考にしてください。

JavaScript if と else 、「==」と「===」

JavaScriptでは、変数に数値でも文字列でも代入することができる。

JavaScriptには変数に「型」がないのですが、実際には型がないわけではないです。数値型、あるいは文字列型、というものがあります。

こんなサンプルを書いてみます。

var value1 = 1;
var value2 = '1';

if (value1 == value2) {
  console.log('Number == String OK');     // 表示される
}
if (value1 === value2) {
  console.log(' Number === String NG ');  // 表示されない
}

var value1 = '1';
if (value1 == value2) {
  console.log('String == String OK');     // 表示される
}
if (value1 === value2) {
  console.log('String === String OK');    // 表示される
}

var value2 = 1;
if (value1 == value2) {
  console.log('String == Number OK');     // 表示される
}
if (value1 === value2) {
  console.log('String === Number NG');    // 表示されない
}

var value1 = 1;

var value2 = '1';

if (value1 == value2) {

console.log('Number == String OK'); // 表示される

}

if (value1 === value2) {

console.log(' Number === String NG '); // 表示されない

}

var value1 = '1';

if (value1 == value2) {

console.log('String == String OK'); // 表示される

}

if (value1 === value2) {

console.log('String === String OK'); // 表示される

}

var value2 = 1;

if (value1 == value2) {

console.log('String == Number OK'); // 表示される

}

if (value1 === value2) {

console.log('String === Number NG'); // 表示されない

}

このようにすると、value1 と value2 には、数値を入れたり文字を入れたりすることができるのがわかりますし、また、「==」と「===」の違いもわかりますね。

よい開発者は、あいまいさを許容しないので「==」は使わない

よい開発者は、変数の値に、数値の「1」が入っているのか、文字列の「1」が入っているのかを、あいまいにしておいてはいけません。

どちらかに確定させておかないと、プログラムコードがよくわからなくなるのです。なので数字の 1 と文字列の 1 が一致しているかどうかを比したいときに「==」をつかいません。

文字列の「1」を、数値の「1」に変換してから、数値同士の比較をする
または、
数値の「1」を、文字列の「1」に変換してから、文字列同士の変換をする

このようにすることがより正しいプログラムの書き方です。

文字列と数値を変換する

文字列を数値に変換するには parseInt を使います。
数値を文字列に変換するには .toString() を使います。

サンプルコードを書いておきます。

var value1 = 1;
var value2 = '1';

value2 = parseInt(value2, 10);

if (value1 === value2) {
  console.log('Number === Number OK');     // 表示される
}

var value1 = 1;
var value2 = '1';

value1 = value1.toString();

if (value1 === value2) {
  console.log('Number === Number OK');     // 表示される
}

var value1 = 1;

var value2 = '1';

value2 = parseInt(value2, 10);

if (value1 === value2) {

console.log('Number === Number OK'); // 表示される

}

var value1 = 1;

var value2 = '1';

value1 = value1.toString();

if (value1 === value2) {

console.log('Number === Number OK'); // 表示される

}

parseInt は parseInt(値, 10) と指定してください。この10は10進数を表します。8進数や16進数を指定することもできますが、たいていの場合は10心数の変換だけに使いたいところでしょう。この第二引数は省略してはいけません。省略するとすごく痛い目を見ます。書き方がださいとは思いますが、parseInt(値, 10) というように使ってください。

どうしても省略したいという気持ちになる場合は、自分で関数つくってそれを使うのがいいでしょう。そのような場合はどのようにするか、ということは、以前に、Qiitaに書いたことのある記事をリンクしておきます。こちらをご参考に。

JavaScriptでparseIntの仕様がいまいちなので、僕の作った最強のparseInt、を考えてみる。 - Qiita
https://qiita.com/standard-software/items/493651c84ca6ff34e4e4

ということで、文字列と数値の互いの変換をしっかり行うことで、あいまいさが消えて、「==」を使わずに全ての場面で「===」を使うということができるようになっていきます。

型変換というのを正しく行うというのは優れた開発者になるために必須のスキルなので身につけておいてください。