>  기사  >  웹 프론트엔드  >  ES6에서 템플릿 리터럴 실행을 연기하는 방법은 무엇입니까?

ES6에서 템플릿 리터럴 실행을 연기하는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-11-09 13:51:03563검색

How to Defer Template Literal Execution in ES6?

ES6에서 템플릿 리터럴 실행 연기

ES6에서 템플릿 리터럴은 동적 값을 문자열에 포함하는 강력한 방법을 제공합니다. 그러나 템플릿 리터럴 내에서 문자열 보간을 사용하는 경우 템플릿 리터럴이 사용자 지정 문자열 조작 방법으로 처리되기 전에 값이 평가됩니다. 이로 인해 템플릿 리터럴 실행을 연기할 때 바람직하지 않은 결과가 발생할 수 있습니다.

이 문제를 해결하기 위해 고려할 수 있는 몇 가지 접근 방식이 있습니다.

1. 템플릿 문자열 활용

템플릿 리터럴 내에서 문자열 보간을 사용하지 말고 대신 의도한 대로 템플릿 문자열을 선택하세요. 예를 들면 다음과 같습니다.

console.log(`Hello, ${"world"}. This is a ${"test"}`);

2. 태그된 템플릿 리터럴 사용

태그된 템플릿 리터럴을 활용하여 템플릿 리터럴 대체가 평가된 후 코드를 실행합니다. 그러나 대체 항목 자체는 여전히 즉시 평가된다는 점에 유의하는 것이 중요합니다.

function formatter(literals, ...substitutions) {
  return {
    format: function() {
      // Implementation for value substitution and template literal concatenation
    }
  };
}
console.log(formatter`Hello, <pre class="brush:php;toolbar:false">String.prototype.format = function() {
  var args = arguments;
  return this.replace(/$\{p(\d)\}/g, function(match, id) {
    return args[id];
  });
};
console.log("Hello, ${p0}. This is a ${p1}".format("world", "test"));
. This is a `.format("world", "test"));

3. 사용자 정의 문자열 조작과 함께 일반 문자열 리터럴 사용

값이 동적으로 검색된 후 나중에 코드에서 문자열 형식을 지정하는 사용자 정의 문자열 조작 함수를 만듭니다.

위 내용은 ES6에서 템플릿 리터럴 실행을 연기하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.