JavaScriptで文字列を組み合わせる4つの方法を紹介します。私のお気に入りはテンプレート文字列を使う方法です。なぜかって？引用符をエスケープするためのバックスラッシュも、厄介なスペース区切りも、紛らわしいプラス演算子もありません。
const icon = '';
// テンプレートの文字列
`hi ${icon}`;
// join()
['hi', icon].join(' ');
// Concat()
''.concat('hi ', icon);
// +
'hi ' + icon;
// RESULT
// hi
テンプレート文字列
他の言語から来た人なら、文字列補間という言葉に馴染みがあるでしょう。これはまさにテンプレート文字列を実現するためのものです。文字列の作成に式を含めるための、すっきりとしたシンプルな方法です。
const name = 'samantha';
const country = '';
文字列の連結でスペースが欠落する問題
"Hi, I'm " + name + "and I'm from " + country;
// Hi, I'm samanthaand I'm from
テンプレート文字列による解決
テンプレート文字列を使えば、この問題を解決できます。文字列は、あなたが表示させたいように書くことができます。スペースが欠けていても簡単に見つけることができますし、とても読みやすくなりました！
`Hi, I'm ${name} and I'm from ${country}`;
join()
join メソッドは、配列の要素を結合して文字列を返します。配列を扱うので、他の文字列を追加したい場合に便利です。
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const array = ['My handles are ', instagram, twitter];
const tiktok = '@samantaming';
array.push(tiktok);
array.join(' ');
// My handles are @samanthaming @samantha_ming @samanthaming
カスタムセパレーター
joinの優れた点は、配列の要素を組み合わせる方法をカスタマイズできることです。これを行うには、引数にセパレータを渡します。
const array = ['My handles are '];
const handles = [instagram, twitter, tiktok].join(', ');
// @samanthaming, @samantha_ming, @samanthaming
array.push(handles);
array.join('');
// My handles are @samanthaming, @samantha_ming, @samanthaming
concat()
concatを使うと、文字列のメソッドを呼び出して新しい文字列を作成することができます。
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';
'My handles are '.concat(instagram, ', ', twitter', ', tiktok);
// My handles are @samanthaming, @samantha_ming, @samanthaming
文字列と配列の組み合わせ
concatを使って文字列と配列を結合することもできます。配列のパラメータを渡すと、自動的に配列の項目がカンマ区切りの文字列に変換されます。
const array = [instagram, twitter, tiktok];
'My handles are '.concat(array);
// My handles are @samanthaming,@samantha_ming,@samanthaming
よりよい書式にしたい場合は、joinを使ってセパレータをカスタマイズすることができます。
const array = [instagram, twitter, tiktok].join(', ');
'My handles are '.concat(array);
// My handles are @samanthaming, @samantha_ming, @samanthaming
+
文字列を結合する際に+演算子を使うと面白いことがあります。この演算子を使って新しい文字列を作成することもできますし、既存の文字列に+演算子を加えて変更することもできます。
非可変
ここでは + を使って新しい文字列を作成します。
const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const tiktok = '@samanthaming';
const newString = 'My handles are ' + instagram + twitter + tiktok;
変数
また、+=を使って既存の文字列に追加することもできます。ですから、何らかの理由で文字列を変更する必要がある場合は、この方法を使うこともできます。
let string = 'My handles are ';
string += instagram + twitter;
// My handles are @samanthaming@samantha_ming
しまったまたスペースを忘れてました。そうだったのね！文字列をつなげるとき、スペースを見落としがちです。
string += instagram + ', ' + twitter + ', ' + tiktok;
// My handles are @samanthaming, @samantha_ming, @samanthaming
まだゴチャゴチャしている感じです。 そこに参加してください！
string += [instagram, twitter, tiktok].join(', ');
// My handles are @samanthaming, @samantha_ming, @samanthaming
文字列内のエスケープ文字
文字列に特殊文字が含まれている場合、組み合わせはまずこれらの文字をエスケープする必要があります。いくつかのケースを見て、どのように回避するかを見てみましょう Ὂ
シングルクォートまたはアポストロフィのエスケープ
文字列を作成する際、シングルクォートまたはダブルクォートを使用することができます。この知識を知っていれば、文字列の中に一重引用符がある場合のとても簡単な解決策は、文字列を逆の方法で作成することです。
const happy = ;
["I'm ", happy].join(' ');
''.concat("I'm ", happy);
"I'm " + happy;
// RESULT
// I'm
もちろん、バックスラッシュで文字をエスケープすることもできます。でも、ちょっと読みにくいので、私はあまり使いません。
const happy = ;
['I\'m ', happy].join(' ');
''.concat('I\'m ', happy);
'I\'m ' + happy;
// RESULT
// I'm
これはテンプレート文字列には適用されません。
二重引用符をエスケープ
一重引用符のエスケープと同様に、反対の引用符を使用する場合にも同じ方法を使用できます。したがって、二重引用符をエスケープするには、一重引用符を使用します。
const flag = '';
['Canada "', flag, '"'].join(' ');
''.concat('Canada "', flag, '"');
'Canada "' + flag + '"';
// RESULT
// Canada ""
はい、バックスラッシュエスケープも使えます。
エスケープ文字
テンプレート文字列はバッククォートを使って文字列を作成するため、その文字を出力する場合はバックスラッシュでエスケープする必要があります。
どっちを使うべき？
文字列をさまざまな方法で連結する例をいくつか紹介します。どの方法が良いかは状況によって異なります。スタイルの好みについては、私はAirbnbのスタイルガイドに従うのが好きです。
したがって、テンプレートのストリングスが勝たなければなりません！
なぜ他のアプローチが重要なのでしょうか？
他の方法も知っておくことはやはり重要です。なぜか？すべてのコードベースがこのルールに従うとは限りませんし、レガシーなコードベースを扱っているかもしれないからです。開発者として、あなたはどんな環境でも適応し、理解する能力が必要です。それは問題を解決することであって、技術の古さに文句を言うことではありません。そうすれば進歩です。
情報源: Publicis フロントエンド・フルスタック開発者
