[04] Template Literals

1927 ワード
テキストリンク

Template Literalsとは?


JavaScriptに文字列を入力する方法.
ES 6は백틱という記号を用いて定義される
テキストと変数を同時に使用できるツールです.$Stringと変数を演算子として追加する必要がなく、コードを簡単に作成できます.
const str = `Hello ES6`
backticでは、複数行にわたって文字列を定義できます.
JavaScript文字列に直接接続できます

長所

  • JS文字列は文字の間に入力できませんが、チェックバックを使用して
    • を入力できます.
  • 文字列の間に変数を挿入できます.
    • var love = 'You';
var emotion = `I love ${love}!`;
console.log(emotion);
//'I love You!'
  • は、以下に示すように、文字列と変数を簡単に使用することができる.
    • var fruit = "apple";

var test1 = "가장 맛있는 과일은" + " " +fruit + " " + "이다.";

console.log(test1)
//'가장 맛있는 과일은 apple 이다.'

var test2 = `가장 맛있는 과일은 ${fruit} 이다.`

console.log(test2)
//'가장 맛있는 과일은 apple 이다.'
  • Jsを使用してHTMLを作成する場合に便利です.
    • `<div>${fruit}</div>`
    入力した
  • スペースも出力になります.
    • var fruit = "apple";

var test3 = `배고파    뭐     먹냐   그건 바로 ${fruit}이다`

console.log(test3)
//'배고파    뭐     먹냐   그건 바로 apple이다'
    リファレンス
    https://joshua1988.github.io/es6-online-book/template-literal.html#%EC%97%AC%EB%9F%AC-%EC%A4%84%EC%97%90-%EA%B1%B8%EC%B3%90-%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%84%A0%EC%96%B8%ED%95%98%EA%B8%B0
    dockerコンテナを用いた開発
    13.13 Copy initialization