JavaScript で文字列を構築/連結するにはどうすればよいですか?

Question

<p>JavaScript は置換/補間をサポートしていますか? </p> <h3>概要</h3>

---

<p>私は JavaScript プロジェクトに取り組んでいますが、プロジェクトが大きくなるにつれて、文字列を良好な状態に保つことがますます困難になってきています。 JavaScript で文字列を構築または構築する最も簡単で伝統的な方法は何なのか知りたいです。 </p> <p>これまでの私の経験:</p> <ブロック引用> <p>プロジェクトが複雑になるにつれて、文字列の連結は見苦しくなり、保守が難しくなります。 </p> </blockquote> <p>この時点で最も重要なことは、シンプルさと読みやすさです。2 ～ 3 個の変数だけではなく、多数の可動部分について考えてください。 </p> <p>同様に重要なことは、現在主要なブラウザ (つまり、少なくとも ES5) でサポートされていることです。 </p> <p>JavaScript 接続の略語は知っています: </p> <pre class="brush:php;toolbar:false;">var x = 'Hello'; var y = 'ワールド'; console.log(x ', ' y);</pre> <p>String.concat 関数もあります。 </p> <p>もっときれいなものを探しています。 </p> <p>Ruby と Swift は、これを興味深い方法で実行します。 </p> <p>ルビー</strong></p> <pre class="brush:php;toolbar:false;">var x = 'Hello' var y = 'ワールド' print "#{x}, #{y}"</pre> <p><strong>スウィフト</strong></p> <pre class="brush:php;toolbar:false;">var x = "こんにちは" var y = "世界" println("(x), (y)")</pre> <p>JavaScript にも同様のもの、sprintf.js のようなものがあるのではないかと思いました。 </p> <h3>質問</h3>

---

<p>これはサードパーティのライブラリなしで実行できますか?そうでない場合、何を使用できますか? </p>

Answer 1

他の回答で「最良の方法」が「最速の方法」を意味することを説明した人がいなかったことにがっかりしました...

ここの から 2 つの例を抽出し、str を追加しました。上記の nishanths の回答 の join() と str.reduce()。 Linux 上の Firefox 77.0.1 での結果は次のとおりです。

---

注: これらをテストしているときに、str = str.concat() と str = を互いの前後に直接配置すると、それらの間にあることがわかりました。 、2 番目の方が常にパフォーマンスが優れています...そこで、これらのテストを個別に実行し、他のテストの結果についてコメントします...

それでも、再実行すると速度が 大きく変化するため、3 回ずつ測定しました。 一度に 1 文字:

str = str.concat()
• : 841, 439, 956 ミリ秒 / 1e7 of concat()
....str =
• :949, 1130, 664 ミリ秒 / 1e7 = の
....[].join()
• : [] には 3350、2911、3522 ms / 1e7 文字があります。
...[].reduce()
• : 3954、4228、4547 ミリ秒 / [] の 1e7 文字
一度に 26 文字列:

str = str.concat()
• : 444, 744, 479 ミリ秒 / 1e7 of concat()
................str =
• ：1037, 473, 875 ミリ秒 / 1e7 = の
....[].join()
• : 2693, 3394, 3457 ms / 1e7 文字列 ([])
....[].reduce()
• : 2782、2770、4520 ミリ秒 / [] の 1e7 文字列

つまり、一度に 1 文字を追加するか、一度に 26 個の文字列を追加するか:

---

明らかな勝者: 基本的には、
• str = str.concat() と str = の間で同点です。
明らかな敗者:
• [].reduce()、次に [].join()

私のコード、ブラウザコンソールで簡単に実行できます:

---

リーリー

Answer 2

ES6 を使用すると、

を使用できます。

• テンプレート文字列: ああああ

ES5 以下:

• 使用 演算子

  ああああ

• 文字列 concat (..)

  ああああ

または、配列メソッドを使用します:

＃＃＃＃＃＃＃＃＃＃＃＃参加する（ ..）＃＃＃＃＃＃：＃＃＃ ああああ

• または、より風変わりなものとして、reduce(..)

  を上記のいずれかと組み合わせます:
ああああ