>웹 프론트엔드 >JS 튜토리얼 >내 JavaScript 템플릿 리터럴이 변수를 대체하지 않는 이유는 무엇입니까?

내 JavaScript 템플릿 리터럴이 변수를 대체하지 않는 이유는 무엇입니까?

DDD
DDD원래의
2024-12-06 22:21:12783검색

Why Aren't My JavaScript Template Literals Substituting Variables?

템플릿 리터럴 문제 해결: 변수 대체 문제 해결

곧은 따옴표 대신 백틱()으로 표시되는 템플릿 리터럴을 통해 개발자는 문자열 내의 표현식. 그러나 'some ${string}' 또는 "some ${string}"`과 같은 템플릿 리터럴이 변수 이름을 해당 값으로 대체하지 못하는 문제가 발생할 수 있습니다.

원인:

이 문제는 따옴표 대신 곧은 따옴표(단일 또는 이중)를 사용할 때 발생합니다. 백틱.

해결책:

이 문제를 해결하려면 다음과 같이 템플릿 리터럴을 둘러싼 곧은 따옴표를 백틱으로 바꾸면 됩니다.

console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${this.categoryElements} `)

설명:

JavaScript 템플릿 리터럴은 백틱을 구분 기호로 사용합니다. 이러한 구별은 곧은 따옴표를 사용하는 일반 문자열과 구분됩니다. 백틱을 사용하면 템플릿 리터럴에 포함된 모든 표현식을 구문 분석하고 평가하도록 JavaScript에 지시하여 결과적으로 변수 값이 대체됩니다.

예:

다음을 고려하세요. 코드:

categoryName="name";
categoryElements="element";
console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${categoryElements} `)

이 코드는 출력:

categoryName: name
categoryElements: element

반대로 곧은 따옴표를 사용한 경우 출력은 다음과 같습니다.

${this.categoryName}
categoryElements: ${this.categoryElements}

이는 곧은 따옴표가 템플릿 리터럴을 일반 따옴표로 처리하는 방법을 보여줍니다. 문자열, 표현식을 평가하는 대신 리터럴 변수 이름 유지

참고:

  • [백틱 문자() 사용 방법 JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Template_literals#Usage_of_the_backtick_character_)

위 내용은 내 JavaScript 템플릿 리터럴이 변수를 대체하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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