【初心者向け】JavaScriptの文字列結合まとめ｜+演算子とテンプレートリテラル【ITTI】

JavaScriptの文字列結合とは？

JavaScriptでは、複数の文字列や変数を組み合わせて新しい文字列を作ることを「文字列結合」と呼びます。

+演算子で結合する

最も基本的な方法です。

let name = "太郎";
let greeting = "こんにちは、" + name + "さん！";
console.log(greeting);

実行結果
こんにちは、太郎さん！

let name = "太郎";
let greeting = "こんにちは、" + name + "さん！";
console.log(greeting);

実行結果
こんにちは、太郎さん！

寸劇

ユーザー「こんにちは＋name（太郎）＋さんっと、できた！実行したろ！」

実行ぽちっ

JavaScript「こんにちは太郎さん」

ってなる

テンプレートリテラルで結合する

バッククォート ` ` を使うと、変数を埋め込みやすくなります。

let name = "花子";
let greeting = `こんにちは、${name}さん！`;
console.log(greeting);

実行結果
こんにちは、花子さん！

let name = "花子";
let greeting = `こんにちは、${name}さん！`;
console.log(greeting);

実行結果
こんにちは、花子さん！

まとめ

•  +演算子：シンプルで基本

•  テンプレートリテラル：可読性が高くおすすめ

ぱちっぱちっ〜ぱちっぱちっ〜、優秀な人はこれを使いますひろゆきさんからです。

AIひろゆき

「+で文字列をつなげるのって、まぁ昔からある方法なんですけど、コードがゴチャゴチャして読みにくいんですよね。  で、優秀な人はテンプレートリテラルを使うんですよ。変数を ${} で埋め込めるから、パッと見て意味がわかる。  だから、+で頑張ってる人を見ると『あれ？まだそっち使ってるんだ』って思っちゃいますよね。」

ITTI

「関数を積極的に使ったほうがかっこいいですよ！でも、私はまだまだです。」

AIひろゆき

「まだまだじゃなくて、もっと勉強してください」

ITTI

「あっはい」

ただし、既存コードでは+演算子もよく出てくるので両方理解しておくと安心です。  つまり、+ もテンプレートリテラルも両方使いこなせると“優秀な人”に近づけます。

最後まで読んで頂きありがとうございました！