JavaScript
템플릿 리터럴

소개

통사론

• message =`환영합니다, $ {user.name}! '
• pattern = new 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 속성과 같은 String Literals의 다른 많은 기능이 있습니다. 이것들은 다른 예에서도 설명되어 있습니다.