Gizanbeak

TypeScriptで日常的によく使われるのが文字列と数字の相互変換です。
これをマスターすることで、データの加工や変換がよりスムーズに行えます。

この記事ではTypeScriptを使用して、文字列と数字を相互に変換する方法に焦点を当てて解説していきます。
具体的には以下の内容を取り上げます。

文字列を数字に変換🔢

まず最初に文字列を数値に変換する方法を紹介します。

文字列を数値に変換するには、主に3つの方法があるため順に説明していきます。

parseInt と parseFloat

let strNum1: string = "123";
let num1: number = parseInt(strNum1);
console.log(num1); // 123
上のコードでは parseInt 関数を使用して文字列 "123" を数値 123 に変換しています。
文字列に小数点が含まれる場合は以下のように parseFloat を使用します！
let strNum2: string = "123.45";
let num2: number = parseFloat(strNum2);
console.log(num2); // 123.45
+ 演算子
もう一つ、シンプルな方法もあります。
let strNum3: string = "123";
let num3: number = +strNum3;
console.log(num3); // 123
この方法は + 演算子を使って文字列を数値に変換しています。
短くて覚えやすいですよね！
数値を文字列に変換🔤
次は数値を文字列に変換する方法です。
数字を文字列に変換するには toString もしくはテンプレートリテラルを使用します。
toString メソッド
let num4: number = 123;
let strNum4: string = num4.toString();
console.log(strNum4); // "123"
上記のコードでは toString メソッドを使って数値 123 を文字列 "123" に変換しています。
とても簡単に変換できますね！
テンプレートリテラル
let num5: number = 456;
let strNum5: string = `${num5}`;
console.log(strNum5); // "456"
テンプレートリテラルを使うと、数値を簡単に文字列に変換できます。
値を表示する時によく用いられるのがテンプレートリテラルですね！
変換に使用する関数による違い🤔

変換に使用する関数によっては、変換後の結果に差異が生まれることがあります。
以下が主な特徴になります。
parseInt と parseFloat は、文字列の先頭から数値部分を読み取り数値に変換します
+ 演算子や Number() 関数は文字列全体が数値でなければエラーになります
toString メソッドは数値を直接文字列に変換します
このように、適切な変換方法を選ぶことでバグを防ぐことができます。
TypeScriptの数値変換はとってもシンプルですね！
適切な方法を選んでコードのバグを少なくしましょう。
              
TypeScriptの型アサーションとは？「as」の使い方も解説
              
TypeScriptの型アサーションを明確に理解しましょう。「as」の使い方からキャストとの違いまでわかりやすく解説します！
                
gizanbeak.com