재사용 가능한 템플릿 리터럴: 숨겨진 잠재력 노출

ES6의 템플릿 리터럴은 광범위하게 활용되지만 영원히 묶여 있다는 인식은 지속됩니다. 재사용하고 동적으로 업데이트할 수 있는 유연성이 부족합니다. 이 기사에서는 템플릿 리터럴을 재사용 가능한 동적 문서로 변환할 수 있는 가능성을 탐색하면서 이러한 개념에 도전합니다.

기존 템플릿의 본질은 런타임에 토큰을 주입하고 필요할 때마다 평가할 수 있는 기능에 있습니다. 그러나 ES6 템플릿 리터럴은 선언 시 대체 항목을 평가하는 것으로 나타나 실용성이 제한됩니다.

필수 촉매: 함수 생성자

이 명백한 한계를 극복하기 위해 우리는 Function 생성자를 중개자로 사용합니다. 이 구성을 활용하면 함수가 호출될 때까지 보간 프로세스를 연기할 수 있습니다.

const templateString = "Hello ${this.name}!";
const templateVars = {
  name: "world",
};

const fillTemplate = function (templateString, templateVars) {
  return new Function(
    "return `"   templateString   "`;"
  ).call(templateVars);
};

console.log(fillTemplate(templateString, templateVars));

이 예에서 fillTemplate 함수는 보간할 템플릿 문자열과 변수 집합을 허용합니다. 함수 내에서 실행 시 런타임에 주입된 templateVars의 값으로 템플릿 문자열을 반환하는 함수를 구성합니다.

재사용 가능한 템플릿 리터럴의 이점

결과적으로 재사용 가능한 템플릿 리터럴은 다음과 같은 다양한 이점을 제공합니다.

• 동적 보간: 런타임 시 값을 템플릿에 보간할 수 있어 더 큰 유연성을 제공합니다.
• 외부 보간: 템플릿은 외부 파일에서 소스로 제공될 수 있습니다. , 유지 관리 및 공동 작업이 용이합니다.
• 확장 기능: 템플릿 태그와 같은 추가 기능을 어느 정도 독창적으로 통합할 수 있습니다.

이 솔루션에는 인라인 JavaScript 로직을 사용하면 해결 방법을 개발할 수 있습니다.

결론

함수 생성자를 사용하여 ES6 템플릿 리터럴의 진정한 잠재력을 활용합니다. 우리는 이를 정적 문자열에서 재사용 가능한 동적 템플릿으로 변환하여 코드 구성 및 유연성에 대한 새로운 가능성을 열어줍니다. 기존 템플릿 엔진의 기능을 완전히 재현하려는 여정이 계속되는 동안 이 기술은 템플릿 리터럴의 기능을 확장하기 위한 강력한 기반을 제공합니다.