本記事では、JavaScriptで文字列を結合する方法について解説していきます。
文字列を結合する方法は、ES5の+演算子を用いた方法とES6から使えるテンプレート文字列を用いた方法があります。
- +演算子を用いた文字列を結合
- テンプレートリテラルを用いた文字列を結合
ぜひ最後までご覧ください。
+演算子で結合
文字列を結合する一番ベーシックな方法としては、+演算子を用いたやり方です。
オーソドックスな文字列同士の連結を+演算子用いてみていきましょう。
|
1 2 3 4 5 |
const pen = "ペン"; const apple = "アップル"; const output = pen + apple; console.log(output); |
実行結果は以下のようになります。
|
1 |
ペンアップル |
文字列の結合とありますが、文字列以外にも文字列と数値や日付の連結など色んなパターンがあります。
|
1 2 3 |
const pineapple = "パイナップル"; const output = 1000 + "個の" + pineapple; console.log(output); |
実行結果は以下のようになります。
|
1 |
1000個のパイナップル |
文字列連結で１つ気をつけなければならないことがあります。
以下のサンプルコードを見ていきましょう。
|
1 2 3 |
const pineapple = "パイナップル"; const output = "値段は" + 1000 + 500 + "個の" + pineapple; console.log(output); |
実行結果は以下のようになります。
|
1 |
値段は1000500個のパイナップル |
“値段は” + 1000が最初に連結されてしまうことが重要なポイントです。
“値段は1000″を連結した後に500を連結したことで、上記の実行結果のように”値段は1000500″という結果が返ってきました。
理想の実行結果としては、
|
1 |
値段は1500個のパイナップル |
となるようにするには以下のように修正する必要があります。
|
1 2 3 |
const pineapple = "パイナップル"; const output = "値段は" + (1000 + 500) + "個の" + pineapple; console.log(output); |
上記のように、文字列と数値が混在する場合は、括弧内に数値を結合させれば、理想の実行結果が返ってきます。
数値以外にも、日付と文字列の連結を+演算子で表示すると、以下のようになります。
|
1 2 3 |
const time = new Date(); const output = (today.getHours() + "時" + today.getMinutes() + "分"); console.log(output); |
実行結果は以下のようになります。（この記事を書いている時間が22時10分です。）
|
1 |
22時10分 |
+演算子を用いた文字列の結合は、ES5まで使われていた方法になります。
テンプレート文字列
文字列を結合するやり方のもう1つの方法がテンプレート文字列と呼ばれるものになります。
テンプレート文字列の基本的な書き方は以下のようになります。
|
1 |
`文字列${変数}文字列` |
テンプレート文字列はES6以降使われる基礎文法になります。
- 文字列を
（バッククォーテーション）で囲う （バッククォーテーション）の中を${変数}と書くことで変数を展開する
実際にテンプレート文字列を用いたサンプルコードを見ていきましょう。
|
1 2 3 4 |
const pen = "ペン"; const apple = "アップル"; console.log(`買ったものは${pen}と${apple}です。`); |
実行結果は以下のようになります。
|
1 |
買ったものはペンとアップルです。 |
テンプレート文字列を用いたサンプルコードと比較して、+演算子を用いると以下のように書くことができます。
|
1 2 3 4 |
const pen = "ペン"; const apple = "アップル"; console.log("買ったものは" + pen + "と" + apple + "です。"); |
得られる実行結果は、テンプレートリテラルで書いたサンプルコードと同じになります。
|
1 |
買ったものはペンとアップルです。 |
console.logで書いた+演算子を用いたコードとテンプレート文字列を比較してみましょう。
実行結果は同じになります。
|
1 2 3 4 5 6 |
const pen = "ペン"; const apple = "アップル"; console.log("買ったものは" + pen + "と" + apple + "です。"); // +演算子を用いた書き方 console.log(`買ったものは${pen}と${apple}です。`); // テンプレート文字列を用いた書き方 |
+演算子を用いると少し長くなるのに対して、テンプレート文字列を用いた書き方だと変数を展開しやすいところがメリットとしてあります。
テンプレート文字列を用いると、（バッククォーテーション）を用いる必要があります。
テンプレート文字列では、バッククォーテーションを使わなければエラーが返ってきます。
そこだけ注意が必要です。
まとめ
いかがだったでしょうか？
今回はJavaScriptで文字列を結合する方法について紹介しました。
フロントエンドエンジニアでReact.jsやVue.jsなどをすでにやっている人やこれから勉強しようと考えている人は、ES6のテンプレート文字列を使うことが多いです。
もしまだテンプレート文字列を使えてないという人がいれば、テンプレート文字列の書き方を使いこなせるようにしましょう。
余裕があれば型変換などをして文字列結合をやってみましょう。
【JavaScript】文字列の型変換の方法を解説！数値・日付・配列
