JavaScriptで配列を文字列に変換する

投稿日: 2022-04-20 2022-10-09
タグ: javascript

配列はあらゆる言語の強力な機能です。複数の情報を簡単に保存できます。追加されるアイテムの順序を維持し、並べ替えることもできます。最新の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() 方法、それが私たちが厄介であまり役に立たないことに終わらない理由です [object Object] ストリング。

一緒に参加する

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

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

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

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

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

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

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

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

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

HTMLといえば

私のお気に入りの1つ .join() テンプレートリテラルとJSXがマークアップの複数の行ブロックでの作業を非常に簡単にする前のトリックは、 .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つの値に結合すれば、準備は完了です。

getdocs

13036