1.文字列の連結
以前学習した復習になりますが文字列は+で連結することができます。
console.log('野比' + 'のび太');出力結果野比のび太
こばゆた
こちらは問題ないですね
では復習をかねて変数と使ってみましょう！
const name = 'のび太';
console.log(name + 'さん ようこそ！');出力結果のび太さん ようこそ！
こばゆた
ではもうひとつ
const firstName = '野比';
const lastName = 'のび太';
console.log(firstName + lastName);出力結果野比のび太
こばゆた
こちらも特に問題はないですか？
これらは頭かお尻に文字列が付くので簡単でしたが、文の中に挟む事になったらどうでしょうか？
const age = 11;
console.log('のび太は' + age + '歳です');出力結果のび太は11歳です
チャッピー
囲って、+を付けて、変数を…
あー面倒くさい！
こばゆた
面倒くさいよね！
そんな時はテンプレートリテラルというものを使おう！
2.テンプレートリテラル
`${変数名や計算式}`文章などを` `(バッククォート)で囲み、値を埋め込みたいところに＄{ }とし{ }内に変数や計算式を埋め込むことで文字列に変換することができます。
テンプレートリテラルの作り方
[ptimeline color=”yellow”]
STEP1
バッククォーテーション(``)で囲む
` `
STEP2
$マークを書く
`$`
STEP3
{ }を書く
`${ }`
STEP4
{ }内に変数名や計算式を入れる
`${変数名や計算式}`
[/ptimeline]
こばゆた
先ほどの例をテンプレートリテラルで書くと…
const age = 11;
console.log(`のび太は${age}歳です`);出力結果のび太は11歳です
チャッピー
あ、すごい楽になった！
こばゆた
値を複数埋め込むのも簡単です
const name = 'のび太';
const age = 11;
console.log(`${name}は${age}歳です。`);出力結果のび太は11歳です。
こばゆた
こちらは計算式を埋め込んでみました
const name = 'のび太';
const age = 9;
console.log(`${name}は${age + 2}歳です。`);出力結果のび太は11歳です。
こばゆた
どちらも問題なくできたと思います
このように数が増えた際に囲み忘れたりする事や、書く手間も減るのでテンプレートリテラルで書くこともおすすめします！
3.まとめ
文字連結 まとめ
- 文字列の連結は”+”でつなぐ事ができる
- 変数と文字列もつなぐ事ができる
const name = 'のび太';
console.log(name + 'さん ようこそ！');出力結果のび太さん ようこそ！
テンプレートリテラル
- テンプレートリテラルを使えば変数や計算式を文中に埋め込む事ができる
テンプレートリテラルの書き方
- バッククォーテーション(｀｀)で囲む
- ＄マークを書く
- { }で囲む
- { }内に埋め込む文字列や計算式を入れる
`${変数名や計算式}`const age = 11;
console.log(`のび太は${age}歳です`);出力結果のび太は11歳です
- 複数埋め込むこともできる
const name = 'のび太';
const age = 11;
console.log(`${name}は${age}歳です。`);出力結果のび太は11歳です。
コメント