こんにちは！
JavaScriptでは、計算時など数値と文字列の間でデータを変換することがよくあります。
この記事では、
JavaScriptで数値を文字列に変換する方法
JavaScriptで文字列を数値に変換する方法
について詳しく説明します。
JavaScriptの数値と文字列の変換方法
JavaScriptで数値を文字列に変換する方法
まずは数値から文字列に変換する方法です。
数値をウェブページに表示するときや文字列と結合したいときに使用します。
どのように使うか見てみましょう！
1.数値をウェブページに表示させる場合です。
let num = 123;
document.getElementById('display').innerText = num.toString();
この例では、数値のnumをtoString()で文字列に変換してウェブページに表示しています。
2.文字列との結合する場合です。
let num = 123;
let str = "Number: " + num.toString();
この例では、数値のnumをtoString()で文字列の”Number: “に結合しています。
実際に変換する方法は複数あります。
toString() メソッドを使用して文字列変換
let num = 123;
let str = num.toString();
console.log(typeof str); // "string"先ほどの例と同じようにtoString() メソッドを使用して文字列にしています。
文字列を連結して文字列変換
let num = 123;
let str = num + '';
console.log(typeof str); // "string"numに空の文字列””を連結して、文字列にしています。
JavaScriptで文字列を数値に変換する方法
次は文字列を数値に変換する場合です。
文字列を数値変換するときは、比較する場合や、計算する場合に使用します。
1.比較する場合
let str同士= "5";
let str2 = "10";
console.log(Number(str1) < Number(str2)); // true
文字列同士の比較だと数字の大小を比較できないため数字に変換して比較する必要があります。
2.計算する場合
let input = "5";
let num = parseInt(input, 5);
console.log(num + 10;);// 15
文字列型だと結合になってしまい『510』となるため、数値型に変換して計算しています。
実際に変換する方法は複数あります。
Number() メソッドを使用して数値変換
let str = "123";
let num = Number(str);
console.log(typeof num); // "number"Number()メソッドでstrを数値に変換しています。
parseInt()メソッドを使用するして数値変換
let str = "123";
let num = parseInt(str, 10);
console.log(typeof num); // "number"parseInt()メソッドでstrを数値に変換しています。Number()メソッドと違うところは第二引数に進数を設定します。今回は10進数にしています。
単項プラス演算子を使用して数値変換
let str = "123";
let num = +str;
console.log(typeof num); // "number"文字列strの前に単項プラス演算子『+』を使用して数字に変換しています。
まとめ
この記事ではJavaScriptの数値と文字列変換について代表的例をあげ、説明しました。
数値を文字列に変換することで、見やすいフォーマットで表示したり、ユーザーインターフェースを強化したりできます。また、文字列を数値に変換すれば、計算やデータ処理がスムーズに行えます。
JavaScriptで変換することは頻繁にありますので、この記事でしっかり理解していただけると嬉しいです。
