配列はあらゆる言語の強力な機能です。 複数の情報を簡単に保存できます。 追加されるアイテムの順序を維持し、並べ替えることもできます。 最新のWebブラウザーでは、人間が読める形式の文字列に自動的に変換することもできます。

現代の優れた機能を備えていても、配列を別の形式にマッサージする必要がある場合や、値をコンマで区切るだけではない場合に備えて、配列を文字列に変換する方法を知っておくとよいでしょう(デフォルトの動作)。 。

入門

特別なツールは必要ありません。 Webブラウザーのコンソールで、またはNode.jsREPLを使用してハックすることができます。 使用されるコマンドは、配列オブジェクトのプロトタイプに組み込まれます。

文字列に、または文字列にしない。

ブラウザで以下を実行する場合:

alert([1, 2, 3]);

追加の作業を行わなくても、メッセージ1,2,3を含むアラートを受信します。 配列の内容をこの形式で表示するだけでよい場合は、かなり遠くまで行くことができます。 これは、テンプレートリテラル内の配列オブジェクトを参照する場合にも機能します。

内部では、配列項目は、区切り文字としてコンマ,文字を使用して、文字列として結合されています。 次のいずれかを実行するのと同じです。

[1, 2, 3].toString();
[1, 2, 3].join();

どちらも同じ1,2,3文字列になります。

実際、.toString()メソッドでできることはこれだけです。 パラメータを受け入れないため、有用性はかなり制限されます。

配列は実際にはJavaScriptのオブジェクトですが、配列の.toString()メソッドは、オブジェクトの.toString()メソッドをオーバーライドします。そのため、厄介であまり役に立たない[ X196X]文字列。

一緒に参加する

デフォルトの動作(渡されたパラメーターなし)は.toString()と同じですが、.join()メソッドは大幅に堅牢です。

文字列を作成するときにカンマの後にスペースを含めたいとしましょう。使用する正確な文字列を.join()に指示できます。

[1, 2, 3].join(', ');

各配列項目を独自の行に配置することをお勧めしますか? 改行文字を渡します。

[1, 2, 3].join('\n');

HTMLを使用していて、代わりにそれらのブレークを使用したいですか?

[1, 2, 3].join('<br>');

HTMLの区切りと新しい行が必要ですか?.. さて、あなたはアイデアを得る。

.join()メソッドは、配列項目を結合するために使用する1つまたは複数の区切り文字を定義できるオプションのパラメーターを受け入れます。

HTMLといえば

テンプレートリテラルとJSXがマークアップの複数の行ブロックを非常に簡単に操作できるようになる前の私のお気に入りの.join()トリックの1つは、.join()を使用してHTMLタグの配列を文字列にアセンブルすることでした。

[
  '<table>',
    '<thead>',
      '<tr>',
        '<th>Name</th>',
        '<th>Level</th>',
      '</tr>',
    '</thead>',
    '<tbody>',
      '<tr>',
        '<td>Alligator</td>',
        '<td>9001</td>',
      '</tr>',
    '</tbody>',
  '</table>',
].join('');

空の文字列を.join()に渡すと、追加の文字なしで配列アイテムが結合されます。

最新の構文オプションのいくつかにアクセスできない場合でも、複数行の文字列やマークアップを処理するのに非常に便利です。

結論

配列項目のコンマ区切りリストをユーザーに表示するだけの場合でも、.join()メソッドを使用するとメリットがあります。 これにより、出力をより細かく制御できるため、ユーザーが読みやすくなります。

渡される配列を理解しないバックエンドサーバーを使用していますか? 配列アイテムを1つの値に結合すれば、準備は完了です。