JavaScript
テンプレートリテラル

前書き

構文

• message = `ようこそ、$ {user.name}！ '
• パターン=新しいRegExp（String.raw`Welcome、（\ w +）！ `）;
• query = SQL`INSERT INTOユーザー（name）VALUES（$ {name}） `

備考

基本補間と複数行の文字列

テンプレートリテラルは、標準の'...'または'...'代わりに使用できる特別なタイプの文字列リテラル"..." 。それらは標準の一重引用符または二重引用符の代わりにバッククォートで文字列を引用することによって宣言されます： `...` 。

テンプレートリテラルには改行を含めることができ、 ${ expression }置換構文を使用して任意の式を埋め込むことができます。デフォルトでは、これらの置換式の値は、表示される文字列に直接連結されます。

const name = "John";
const score = 74;

console.log(`Game Over!

${name}'s score was ${score * 10}.`);

Game Over!

John's score was 740.

生の文字列

String.rawタグ関数は、バックスラッシュのエスケープシーケンスを解釈せずに、その内容のバージョンにアクセスするためにテンプレートリテラルで使用できます。

String.raw`\n`はバックスラッシュと小文字nを含み、 `\n`または'\n'は単一の改行文字を含みます。

const patternString = String.raw`Welcome, (\w+)!`;
const pattern = new RegExp(patternString);

const message = "Welcome, John!";
pattern.exec(message);

["Welcome, John!", "John"]

タグ付き文字列

テンプレートリテラルの直前で識別された関数は、 タグ付きテンプレートリテラルと呼ばれるものを解釈するために使用されます。タグ関数は文字列を返すことができますが、他の型の値を返すこともできます。

タグ関数の最初の引数、 stringsは、リテラルの各定数部分の配列です。残りの引数、 ...substitutions 、各${}置換式の評価値を含みます。

function settings(strings, ...substitutions) {
  const result = new Map();
  for (let i = 0; i < substitutions.length; i++) {
    result.set(strings[i].trim(), substitutions[i]);
  }
  return result;
}

const remoteConfiguration = settings`
  label    ${'Content'}
  servers  ${2 * 8 + 1}
  hostname ${location.hostname}
`;

Map {"label" => "Content", "servers" => 17, "hostname" => "stackoverflow.com"}

stringsアレイは、特別有する.rawリテラルが、 正確に 、彼らは、任意のバックスラッシュ・エスケープを交換することなく、ソースコードに表示されるテンプレートの同じ定数個の並列アレイを参照するプロパティ。

function example(strings, ...substitutions) {
  console.log('strings:', strings);
  console.log('...substitutions:', substitutions);
}

example`Hello ${'world'}.\n\nHow are you?`;

strings: ["Hello ", ".\n\nHow are you?", raw: ["Hello ", ".\\n\\nHow are you?"]]
substitutions: ["world"]

テンプレート文字列を使用したHTMLテンプレート

HTML`...`テンプレート文字列タグ関数を作成して、補間された値を自動的にエンコードすることができます。 （これは、補間された値がテキストとしてのみ使用される必要があり、スクリプトやスタイルなどのコードで補間された値が使用されている場合は安全ではない可能性があります）。

class HTMLString extends String {
  static escape(text) {
    if (text instanceof HTMLString) {
      return text;
    }
    return new HTMLString(
        String(text)
            .replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/\\/g, '&#39;'));
  }
}

function HTML(strings, ...substitutions) { 
  const escapedFlattenedSubstitutions =
      substitutions.map(s => [].concat(s).map(HTMLString.escape).join(''));
  const pieces = [];
  for (const i of strings.keys()) {
    pieces.push(strings[i], escapedFlattenedSubstitutions [i] || '');
  }
  return new HTMLString(pieces.join(''));
}

const title = "Hello World";
const iconSrc = "/images/logo.png";
const names = ["John", "Jane", "Joe", "Jill"];

document.body.innerHTML = HTML`
  <h1><img src="${iconSrc}" /> ${title}</h1>

  <ul> ${names.map(name => HTML`
    <li>${name}</li>
  `)} </ul>
`;

前書き

テンプレートリテラルは、特別な機能を持つ文字列のように動作します。それらはバックチック``囲まれ、複数の行にまたがることができます。

テンプレートリテラルには埋め込み式も含めることができます。これらの式は、 $記号と中括弧{}示されます{}

//A single line Template Literal  
var aLiteral = `single line string data`;


//Template Literal that spans across lines       
var anotherLiteral = `string data that spans
         across multiple lines of code`;     

//Template Literal with an embedded expression
var x = 2;
var y = 3; 
var theTotal = `The total is ${x + y}`;     // Contains "The total is 5" 



//Comarison of a string and a template literal
var aString = "single line string data"
console.log(aString === aLiteral)                         //Returns true

Tagged Template LiteralsやRawプロパティなど、文字列リテラルの他の多くの機能があります。これらは他の例で実証されています。