템플릿 리터럴: 재사용 재개

ES6의 템플릿 리터럴은 종종 강력한 텍스트 조작 도구로 선전되지만, 여전히 질문은 계속됩니다. 과연 재사용할 수 있을까요?

충족할 수 없는 기대

얼핏 보면 템플릿 리터럴은 선언 시에만 동적 대체를 약속하는 것처럼 보입니다. 정적으로 유지되는 템플릿이란 무엇입니까?

주기 깨기

일반적인 믿음과는 달리 템플릿 리터럴은 함수를 사용하여 런타임 대체를 통해 다시 활성화될 수 있습니다. 중개자로서의 생성자:

const template = "Hello ${this.name}!";
const variables = {
  name: "world"
};
function fillTemplate(str, data) {
  return new Function("return `"   str   "`;").call(data);
}
console.log(fillTemplate(template, variables)); // Output: Hello world!

재사용 가능한 템플릿 분석

이 기술을 사용하면 다음이 가능합니다.

• 런타임 보간: 변수는 기존 템플릿 엔진처럼 동적으로 채워집니다.
• 조각화: 템플릿은 별도의 파일에 저장하거나 동적으로 얻을 수 있습니다.
• 동적 생성: 템플릿을 즉시 구성하고 평가할 수 있습니다.

주의 사항 해결

이 방법은 기능을 되살리지만 몇 가지 주의 사항이 있습니다. 주의 사항:

• 제한된 JavaScript: 인라인 JavaScript 논리는 늦은 보간으로 인해 불가능합니다.
• 템플릿 태그: 템플릿 태그가 까다로워집니다. 구현합니다.

이러한 제한에도 불구하고 약간의 독창성을 활용하면 템플릿 리터럴이 기존의 한계를 뛰어넘어 진정으로 재사용이 가능하다는 것이 분명해졌습니다.