어떻게 동적으로 보간 된 문자열을 자바 스크립트로 만들 수 있습니까?

Question

재사용 가능한 UI 구성 요소를 만드는 중입니다. 구성 요소의 소비자가 구성 요소의 특정 영역에 대해 자체 템플릿을 제공 할 수있는 방법을 파악하려고합니다.

저는 typescript를 사용하고 있으며 가장 적절한 조치 과정 인 것처럼 문자열 보간을 사용하여이 작업을 수행하려고합니다. 여기

는 내가 지금까지 무엇을 가지고 :

export class Pager { 
    pageNumber: number = 1; 

    getButtonHtml(buttonContentTemplate?: string, isDisabled?: boolean): string { 
     buttonContentTemlpate = buttonContentTemplate || '${this.pageNumber}'; 
     isDisabled = isDisabled || false; 
     return `<button id="button-id" type="button" ${!isDisabled ? '' : disabledAttribute}> 
        ${buttonContentTemplate} 
       </button>`; 
    } 
} 

내가 페이지 번호를 기반으로 사용자 입력/상호 작용을 업데이트 할 다른 방법을 가지고,하지만 난 그게의를 호출되는 경우 getButtonHtml 것을 작업 할 반환 값은 <button id="button-id" type="button">1</button>이지만, 대신 <button id="button-id" type="button">${this.pageNumber}</button>이 표시됩니다.

자바 스크립트에서 문자열을 다시 평가하고 나머지 자리 표시자를 삽입하는 방법이 있습니까?

이 항목에 대한 MDN 문서를 살펴본 결과 String.raw 방법이 내가 사용해야하는 것일 수 있다고 생각했지만 확실하지 않았습니다. 시도하지 않았더라도 작업.

도움을 주시면 감사하겠습니다.

Answer 1

문제는 Template literals이 즉시 해석된다는 것입니다.

템플릿로드가 지연되었습니다. 따라서 문자열을 반환하는 함수를 전달하는 것이 가장 좋습니다.

export class Pager { 
    pageNumber: number = 1; 

    getButtonHtml(template?:() => string, isDisabled=false): string { 
     template = template || function() { return this.pageNumber.toString() }; 
     return `<button id="button-id" type="button" ${!isDisabled ? '' : disabledAttribute}> 
        ${template()} 
       </button>`; 
    } 
} 

또한, 당신은 || 트릭을 방지하기 위해 기본 매개 변수를 활용할 수 있습니다.