こんにちは、ともです。

この記事ではJavaScriptにおいて文字列⇄数値の変換処理について理解をまとめます。

文字列→数値

GlobalオブジェクトのNumberでキャスト

let number = Number('123')
console.log(number);

JavaScriptはよく利用する機能をGlobalオブジェクトとして提供しています。

Numberでキャストすることで文字列→数値に変換が可能です。

parseXXX系のメソッドの利用

JavaScriptの組み込みオブジェクトにNumberクラスが存在します。

このNumberクラスのメンバーにはparseIntやparseFloatといった関数が登録されおり、この関数を利用することにより文字列→数値の変換が可能です。

let moji = '123';
let mojiInt = Number.parseInt(moji);// Or parseInt(moji)<=Global
console.log(mojiInt);//123(number)

「123」という文字列を「123」という数値に変換することができます。

let moji = '123XXX';
let mojiInt = Number.parseInt(moji);// Or parseInt(moji)<=Global
console.log(mojiInt);//123(number)

このような場合も同様に「123」という数値に変換されます。

これは先頭から数値として利用できる箇所までで変換しているためです。

ですので、

let moji = 'XXX123';
let mojiInt = Number.parseInt(moji);// Or parseInt(moji)<=Global
console.log(mojiInt);//Nan

これは「XXX」から始まっているため数値として利用できず「Nan」となります。

『ー』演算子の利用

算術演算子である『-』を利用することにより文字列→数値の変換を行うことも可能です。

let moji = '123';
let mojiNum = moji - 0;
console.log(mojiNum);//123(number)

こちらのように「0で引く」ことにより数値型に変換されます。

これはマイナス演算子を利用した時に、どちらかが数値であれば、片方も数値に変換されるためです。

「0」という数値型でマイナス演算子を利用したため、moji(文字列)が数値型に変換されました。その後「0」で引くため値は変化しません。

数値→文字列

GlobalオブジェクトのStringでキャスト

let str = String(123)
console.log(str);//'123'

GlobalオブジェクトのStringでキャストすることで数値→文字列に変換が可能です。

NumberオブジェクトのtoStringメソッド

let num = 123;
let string = num.toString(10);
console.log(string);

NumberオブジェクトのtoStringを利用することで数値型に変換することが可能です。

toStringの引数に「10」を設定した理由は10進数に変換するためであります。

『+』演算子の利用

算術演算子である『+』を利用することにより数値→文字列の変換を行うことも可能です。

let moji = '123';
let mojiToNum = '123' - 0;
console.log(mojiToNum);

『-』を利用した場合、どちらかが数値であれば、もう一方を数値型に変換します。

これにより『”123″(String)』が『123(Number)』となります。

最後に『0』で引かれても値は変化しませんので、意図した数値型への変換が可能となります。

まとめ

文字列⇄数値の変換について勉強しまとめました。

どれを利用しても良いですが一つやり方を覚えておき毎回調べないようにしておきたいです。