> 웹 프론트엔드 > JS 튜토리얼 > ES6 템플릿 리터럴 평가를 연기하는 방법은 무엇입니까?

ES6 템플릿 리터럴 평가를 연기하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-09 00:30:02
원래의
826명이 탐색했습니다.

How to Defer ES6 Template Literal Evaluation?

ES6 템플릿 리터럴에 대한 평가 연기

ES6에서 템플릿 리터럴은 동적 값으로 문자열 보간을 허용합니다. 그러나 때로는 동적 요소를 통합하기 위해 나중에 템플릿 리터럴의 평가를 연기해야 ​​할 수도 있습니다.

질문: ES6 템플릿의 평가를 연기하는 코드를 어떻게 작성할 수 있습니까? 보간에 사용되는 요소를 동적으로 생성한 이후까지 리터럴로 처리해야 합니까?

답변: 여러 가지가 있습니다. 이를 달성하기 위한 접근 방식:

  1. 일반 문자열 사용:

    즉시 평가를 피하기 위해 템플릿 문자열 대신 일반 문자열 리터럴을 사용합니다. 보간 자리 표시자 값은 다음과 같은 사용자 정의 프로토타입 방법을 사용하여 형식을 지정할 수 있습니다.

    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"));
    로그인 후 복사
  2. 태그가 있는 템플릿 리터럴 사용:

    태그가 있는 템플릿 리터럴 대체 방법을 제안합니다. 그러나 "p0"과 같은 식별자의 보간을 허용하지 않고 대체 항목이 계속 평가된다는 점에 유의하는 것이 중요합니다.

    function formatter(literals, ...substitutions) {
        return {
            format: function() {
                var out = [];
                for(var i=0, k=0; i < literals.length; i++) {
                    out[k++] = literals[i];
                    out[k++] = arguments[substitutions[i]];
                }
                out[k] = literals[i];
                return out.join("");
            }
        };
    }
    console.log(formatter`Hello, <pre class="brush:php;toolbar:false">console.log(`Hello, ${"world"}. This is a ${"test"}`);
    로그인 후 복사
    . This is a `.format("world", "test"));
  3. 지연 방지:

    형식 함수나 지연 없이 템플릿 문자열을 의도한 대로 사용하는 것을 고려하세요. 템플릿 문자열은 추가적인 복잡성 없이 동적 값을 보간하는 간결하고 효율적인 방법을 제공합니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿