プロフィール
JavaScript PR

JavaScript – 数値と文字列を相互変換する方法

  /
number-and-string-conversion-typeScript
記事内に商品プロモーションを含む場合があります

本記事では、
JavaScript で、
数値を文字列に変換する方法を解説します！

Contents
  1. 数値を文字列に変換する方法
  2. 文字列を数値に変換する方法
  3. まとめ

数値を文字列に変換する方法

数値を文字列に変換するには、いくつかの方法があります。

String コンストラクタを使用する

let num = 123; 
let str = String(num);

toString メソッドを使用する

let num = 123; 
let str = num.toString();

テンプレートリテラルを使用する

let num = 123; 
let str = `${num}`;


これらの方法はいずれも、
数値を文字列に変換するための有効な方法です！

toFixedメソッドを使用する

このメソッドは
Number の小数点以下の桁数を n 桁にした文字列を返します。

var num = 1.23456789;
var s1 = num.toFixed(0); //=> "1"
var s2 = num.toFixed(6); //=> "1.234568" 
var s3 = num.toFixed(10); //=> "1.2345678900" 
console.log(s1)
console.log(s2)
console.log(s3)

参考：パフォーマンスの違い

JavaScriptでは、上記のように、
同じ目的を達成するために複数の方法が存在しますが、
パフォーマンスの違いが出ることがあります。

String(), toString(), テンプレートリテラルの3つの
数値を文字列に変換する方法について、
以下の観点でパフォーマンスの差を示します。

  • String()コンストラクタ
    少し遅い場合がありますが、
    明示的な型変換のため読みやすいです。
  • toString()メソッド
    オブジェクトや配列に対しても使えるため、
    より広い範囲で使えます。
  • テンプレートリテラル
    変換するだけでなく文字列を
    操作したい場合に有効です
    （例：文字列に数値を埋め込む）。

コードの読みやすさやパフォーマンスが
重視される場合に応じて使い分けるとよいです。

大規模なデータセットを処理する際には
ベンチマークテストを実行し、
最も適した方法を選ぶことを推奨します。

文字列を数値に変換する方法

文字列を数値に変換する方法もいくつかあります。

Numberコンストラクタを使用する

let str = "123"; 
let num = Number(str);

parseInt または parseFloat 関数を使用する

let str = "123.45"; 
let numInt = parseInt(str); // 123 
let numFloat = parseFloat(str); // 123.45

単項プラス演算子を使用する

let str = "123"; 
let num = +str;

これらの方法を使用することで、
文字列を数値に効率的に変換することができます。

参考

エッジケースの対処

数値変換には、いくつかのエッジケースが存在します。
特に、文字列を数値に変換する際には、
無効な入力に対処することが重要です。
Number()やparseInt()、parseFloat()を使う際に注意すべき点をまとめます。

let invalidStr = "123abc";
console.log(Number(invalidStr));  // NaN
console.log(parseInt(invalidStr)); // 123
console.log(parseFloat(invalidStr)); // 123

上記の例では、
parseInt()やparseFloat()は部分的に数字を取り出して変換しますが、
Number()は完全な数値でないとNaNを返します。
これを防ぐために、事前に型チェックを行い、
無効な入力に対処するロジックが必要です。

let str = "123abc";
if (isNaN(Number(str))) {
    console.log("無効な入力です");
}

異なる進数での変換

parseInt()関数は、
進数を指定することで異なる基数の数値を文字列から変換できます。
これにより、2進数や16進数の数値も扱うことが可能です。

let binary = "1010"; // 2進数
let decimal = parseInt(binary, 2); // 10進数に変換
console.log(decimal); // 10

let hex = "1A"; // 16進数
let decimalFromHex = parseInt(hex, 16); 
console.log(decimalFromHex); // 26

この機能は、特定の状況で非常に便利です。
特に、プログラムで進数の変換を頻繁に行う場面では、
parseInt()の第2引数を使用して柔軟に対応することができます。

大きな数値を扱う場合（BigInt）

JavaScriptのNumber型は安全に扱える範囲が限られており、
非常に大きな数値を扱う場合にはBigIntが必要です。
数値が極めて大きい場合には、BigInt型に変換して扱います。

let bigNum = BigInt("9007199254740991");
let strFromBigInt = bigNum.toString();
console.log(strFromBigInt); // "9007199254740991"

BigIntと通常のNumber型を混合して使うことはできないため、
型変換の際に注意が必要です。

まとめ

Javascript(TypeScript)では、
数値と文字列の間での変換が簡単に行えます。
これにより、さまざまな計算や操作を柔軟に実装することが可能です。

数値と文字列の変換を行う際には、
データの型が期待通りであることを確認することが重要です。
特に、文字列を数値に変換する際には、
無効な入力によるNaN（Not a Number）
という結果に注意する必要があります。
これらを適切に処理することで、
より堅牢なアプリケーションを作成することができます。

TypeScriptを使用することで、
このような型変換を含む多様な操作が、
型の安全性を保ちながら行えるため、
開発者はより信頼性の高いコードを書くことができます。

誰かの参考になれば！

数値 文字列
RELATED POST