JavaScript 백틱: 문자열 보간 또는 태그된 템플릿 함수?

JavaScript의 백틱: 함수 호출 또는 문자열 태깅?

JavaScript에서 백틱(...)을 사용할 때 예기치 않은 동작이 발생할 수 있습니다. , 예를 들어 백틱 내부에 단일 매개변수를 사용하여 console.log를 실행하는 경우:

console.log`1`;

출력 생성 like:

console.log`1`
VM12380:2 ["1", raw: Array[1]]

태그된 템플릿 이해

이 동작은 ES6에 도입된 태그된 템플릿 개념에서 발생합니다. 태그가 있는 템플릿은 백틱과 함께 사용하여 문자열 리터럴을 조작할 수 있는 함수입니다. 태그가 지정된 템플릿이 호출되면 두 개의 매개변수를 받습니다:

• 문자열: 문자열 리터럴의 배열
• ...값: 문자열 리터럴 내에 포함된 값의 배열

함수 호출 vs. 태깅

backticks가 있는 console.log의 경우 backticks가 함수를 호출하지 않습니다. 대신, console.log 함수를 사용하여 문자열 리터럴 "1"에 태그를 지정합니다. 결과 태그가 지정된 템플릿 함수는 변환된 값이 포함된 배열을 반환합니다.

구체적으로:

• strings[0]에는 문자열 리터럴인 "1"
• strings[가 포함됩니다. 1]은 정의되지 않았습니다
• 값[0]에는 포함된 값이 포함되어 있습니다. 1
• raw에는 변환되지 않은 문자열 리터럴이 포함되어 있습니다. ["1"]

변환

최신 브라우저는 ES6 코드를 호환되도록 변환합니다. 이전 JavaScript 버전의 경우. 이 경우 태그가 지정된 템플릿 함수는 일반 함수 호출로 변환됩니다.

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };

console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

_taggedTemplateLiteralLoose 함수는 배열을 인쇄하는 console.log 함수에 전달되는 배열을 반환합니다.

결론

JavaScript의 백틱은 두 문자열 모두에 사용할 수 있습니다. 보간 및 태그가 지정된 템플릿. 태그가 지정된 템플릿 함수와 함께 사용하면 함수는 문자열 리터럴 및 포함된 값의 구문 분석된 값을 수신하여 데이터를 출력하기 전에 조작 및 변환할 수 있습니다.

위 내용은 JavaScript 백틱: 문자열 보간 또는 태그된 템플릿 함수?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!