文字列を連結する
このレッスンで分かること
+は文字列が相手だと、足し算ではなく「つなぐ」働きになります- 空白や読点は、自分で書き足さないと入りません
名前と肩書きを 1 本の文にしたい
JavaScript の + は、左右にあるものによって働きが変わります。数値どうしなら足し算、片方でも文字列なら連結です。
JavaScript
console.log(1 + 2);
// => 3
console.log("Hello, " + "JavaScript!");
// => Hello, JavaScript!同じ記号なのに結果がまるで違います。この「文字列をつなげる」働きを連結と呼びます。つないだ結果はまた 1 本の文字列なので、+ を並べれば 3 つでも 4 つでも好きなだけつなげられます。固定の文章を文字列で書き、変わる部分を引数で書けば、呼ぶたびに違う文ができます。
JavaScript
function workLabel(work, year) {
return work + "（" + year + " 年公開）";
}
console.log(workLabel("プロフィールサイト", 2026));
// => プロフィールサイト（2026 年公開）数値の 2026 は、文字列と + でつなぐと自動で文字になります。数値を文字に直す特別な処理は要りません。
空白は自分で入れる
連結でいちばん多いつまずきが、空白の入れ忘れです。JavaScript は気を利かせてくれません。書いたとおりにくっつけます。
JavaScript
console.log("山田" + "太郎");
// => 山田太郎
console.log("山田" + " " + "太郎");
// => 山田 太郎日本語の読点や句点も同じで、自分で足します。"こんにちは、" のように、区切りの記号を文字列の中に含めてしまうのが手軽です。テストが通らないときは、まず空白 1 つの差を疑ってください。コンソールに出た文字列と期待値を並べて、端から 1 文字ずつ見比べます。見た目が同じでも、末尾に余分な空白が付いていることがあります。
文章の途中で改行したいときは \n と書きます。バックスラッシュと n の 2 文字で、1 つの改行を表す決まりです。
JavaScript
console.log("山田 太郎" + "\n" + "Web エンジニアを目指しています");コンソールには 2 行に分かれて出ます。こうした特別な意味を持つ書き方をエスケープシーケンスと呼びます。
足したいのに数字が並ぶ
+ は左から順に処理されます。だから、文字列が先に来ると、そのあとの数値も次々と連結されていきます。
JavaScript
console.log("合計 " + 1 + 2 + " 件");
// => 合計 12 件
console.log("合計 " + (1 + 2) + " 件");
// => 合計 3 件上の行は、まず "合計 " と 1 がつながって "合計 1" になり、そこに 2 がついて "合計 12" になりました。先に足し算をさせたいときは、その部分をカッコでくくります。カッコの中が先に計算され、その結果が連結の材料になります。
表示がおかしいときは、まず連結と計算の境目を疑ってください。「なぜか数字が 2 つ並ぶ」現象は、実務でも定期的に起きます。
よくある間違い
- 変数名をクォートで囲む —
"work"と書くと、引数の中身ではなくworkという 4 文字がそのまま出ます。クォートで囲むのは固定の文章だけです - 句読点や単位の前後がずれる — テストは 1 文字も違わないことを求めます。読点の前後まで期待値と見比べます
要件
- 関数名は
buildGreeting、引数はnameとtitleの 2 つ (どちらも文字列) - 戻り値は
こんにちは、+ name +です。+ title をつないだ文字列 nameの前後の半角スペースと、読点・句点の位置を正確にそろえること
入出力例
buildGreeting("山田 太郎", "Web エンジニアを目指しています") → "こんにちは、山田 太郎 です。Web エンジニアを目指しています"
buildGreeting("田中 花子", "デザイナーです") → "こんにちは、田中 花子 です。デザイナーです"
buildGreeting("山田 太郎", "") → "こんにちは、山田 太郎 です。"
buildGreeting("", "") → "こんにちは、 です。"ヒント
