Help us understand the problem. What is going on with this article?

join()メソッドの区切り文字について

join()メソッドを理解する

仕事でjoin()メソッドを使った際に、「配列を文字列に変換できるんだなー」という浅い理解にとどまっていたことを痛感しました。
特に区切り文字について理解不足と感じたので、再度理解を深めるために記載しました。

公式を確認

公式を確認します。
join() メソッド 公式

きちんと読むととてもわかりやすく記載頂いてます。いつもさらっと必要な箇所だけ流し読みしてしまうので、きちんと読む癖をつけたいなと思います。

説明の抜粋

join() メソッドは、配列 (または配列風オブジェクト) の全要素を順に連結した文字列を新たに作成して返します。区切り文字はカンマ、または指定された文字列です。配列にアイテムが一つしかない場合は、区切り文字を使用せずにアイテムが返されます。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

再確認

ここで 配列.join();配列.join(''); では挙動が違うことがわかります。

配列.join(); のように、区切り文字を省略した場合
配列の要素はカンマ (",") で区切られます。

配列.join(''); のように、区切り文字を空文字にした場合、
すべての要素の間が区切り文字なしで繋がります。

このように配列を何で区切るか設定するとき、設定なし・空文字では挙動が違います。

まとめ

配列を文字列にする、そのくらいの浅い理解でしたが、区切り文字について理解不足でした。他にも理解不足な箇所もあると思うので、引き続き勉強し続けたいと思います。

shimamar
30歳で未経験からエンジニアになるため転職し、仕事でHTML/CSS/JSを触りながら独学でphpを勉強中。仕事や独学で習得したことや勉強したことをアウトプットしていければと思います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away