[JavaScript] 数値を文字列に変換する時最もパフォーマンスが良い方法 – コピペで使える JavaScript逆引きリファレンス

数値を文字列に変換するには、以下３種類がありますが
どれが最もパフォーマンスがよいか調べてみました。

//１．数値に空文字を結合するパターン
var e1 = "" + 123 + 456 + 789;
console.log(e1);
⇒"123456789"

//２．String()を使用するパターン
var e2 = String(123) + String(456) + String(789);
console.log(e2);
⇒"123456789"

//３．.toString()を使用するパターン
var e3 = (123).toString() + (456).toString() + (789).toString();
console.log(e3);
⇒"123456789"

//１．数値に空文字を結合するパターン

var e1 = "" + 123 + 456 + 789;

console.log(e1);

⇒"123456789"

//２．String()を使用するパターン

var e2 = String(123) + String(456) + String(789);

console.log(e2);

⇒"123456789"

//３．.toString()を使用するパターン

var e3 = (123).toString() + (456).toString() + (789).toString();

console.log(e3);

⇒"123456789"

サンプルソース

それぞれの方法を１億回ずつ処理を行い、時間を計測します。

例）数値を文字列にする時間を計測する

var a = 999;
var cnt = 100000000;  //1億回

//「数値に空文字を結合する」方法の時間
console.time('cnt1');
for(var i=0;i<cnt;i++){
  '' + a;
}
console.timeEnd('cnt1');

//「String()を使用する」方法の時間
console.time('cnt2');
for(var i=0;i<cnt;i++){
  String(a);
}
console.timeEnd('cnt2');

//「.toString()を使用する」方法の時間
console.time('cnt3');
for(var i=0;i<cnt;i++){
  a.toString();
}
console.timeEnd('cnt3');

var a = 999;

var cnt = 100000000; //1億回

//「数値に空文字を結合する」方法の時間

console.time('cnt1');

for(var i=0;i<cnt;i++){

'' + a;

}

console.timeEnd('cnt1');

//「String()を使用する」方法の時間

console.time('cnt2');

for(var i=0;i<cnt;i++){

String(a);

}

console.timeEnd('cnt2');

//「.toString()を使用する」方法の時間

console.time('cnt3');

for(var i=0;i<cnt;i++){

a.toString();

}

console.timeEnd('cnt3');

（Chromeで実行した結果例）: cnt1: 467.323974609375ms cnt2: 899.31005859375ms cnt3: 3025.0009765625ms

Chromeで実行した結果ですが、空文字を付加する方法が最も早いですね。
一番書きそうなパターンの.toString()はかなり遅いです。

個人的には空文字を付加する書き方は、美しくないのであまり好きではないですが・・

まとめ

数値を文字列に変換する時は、空文字を付加する方法がパフォーマンス的にベスト。
とはいえ、サンプルのように大量に変換しないかぎり実感できる程のスピード差はないので、好みの書き方で書くのがよいかと思います。

2020/8/19 追記

コメント欄よりご指摘を頂きましたので、ループで使用している変数iをキャスティングするパターンを試してみました。

コメントありがとうございますm(_ _)m

例）数値を文字列にする時間を計測する（数値が毎回変更するパターン）

var cnt = 100000000;  //1億回

//「数値に空文字を結合する」方法の時間
console.time('cnt1');
for(var i=0;i<cnt;i++){
  '' + i;
}
console.timeEnd('cnt1');

//「String()を使用する」方法の時間
console.time('cnt2');
for(var i=0;i<cnt;i++){
  String(i);
}
console.timeEnd('cnt2');

//「.toString()を使用する」方法の時間
console.time('cnt3');
for(var i=0;i<cnt;i++){
  i.toString();
}
console.timeEnd('cnt3');

var cnt = 100000000; //1億回

//「数値に空文字を結合する」方法の時間

console.time('cnt1');

for(var i=0;i<cnt;i++){

'' + i;

}

console.timeEnd('cnt1');

//「String()を使用する」方法の時間

console.time('cnt2');

for(var i=0;i<cnt;i++){

String(i);

}

console.timeEnd('cnt2');

//「.toString()を使用する」方法の時間

console.time('cnt3');

for(var i=0;i<cnt;i++){

i.toString();

}

console.timeEnd('cnt3');

（Chromeで実行した結果例）: cnt1: 13366.6767578125ms cnt2: 14554.533935546875ms cnt3: 13850.64404296875ms

ty より:

2020年8月11日 5:55 PM

計測サンプルの
> '' + a;
の後の
> console.timeEnd('cnt2');
は
> console.timeEnd('cnt1');
ではないですか？

あと、変動しない変数aを繰り返しキャストしても、最適化されてしまっていて正確な比較はできないかと思います。
ループで使っている変数iをキャスティングしたほうが良いかと思いますがどうでしょう。

返信
- とらより:
  
  2020年8月19日 6:13 PM
  
  コメントありがとうございます。
  
  cnt2はcnt1の間違いです。
  変数iを使う方法は記事に追記させていただきました。
  
  返信

comment コメントをキャンセル