> 웹 프론트엔드 > JS 튜토리얼 > `eval` 또는 `new Function`을 사용하지 않고 ES6 JavaScript에서 일반 문자열을 템플릿 리터럴로 변환하려면 어떻게 해야 합니까?

`eval` 또는 `new Function`을 사용하지 않고 ES6 JavaScript에서 일반 문자열을 템플릿 리터럴로 변환하려면 어떻게 해야 합니까?

Barbara Streisand
풀어 주다: 2024-11-27 08:24:10
원래의
536명이 탐색했습니다.

How Can I Convert a Regular String to a Template Literal in ES6 JavaScript Without Using `eval` or `new Function`?

ES6을 사용하여 문자열을 템플릿 문자열로 변환

JavaScript에서 템플릿 문자열을 사용하면 표현식과 변수를 문자열에 직접 포함할 수 있습니다. 간결하고 읽기 쉬운 구문. 그러나 기존의 비템플릿 문자열에서 템플릿 문자열을 생성하려면 어떻게 해야 할까요? 이 질문은 eval 또는 new Function과 같은 동적 코드 생성 기술을 사용하지 않고도 이러한 변환을 수행할 수 있는 가능성을 탐구합니다.

제공된 솔루션은 사용자 지정 보간 기능과 함께 ES6의 문자열 보간 기능을 활용합니다. 이 함수는 템플릿 매개변수가 포함된 객체를 취하고 JavaScript 템플릿 리터럴을 사용하여 템플릿 문자열을 동적으로 생성합니다.

솔루션 작동 방식은 다음과 같습니다.

String.prototype.interpolate = function(params) {
  const names = Object.keys(params);
  const vals = Object.values(params);
  return new Function(...names, `return \`${this}\`;`)(...vals);
}
로그인 후 복사

보간 함수는 사용자 정의로 추가됩니다. String 객체에 대한 프로토타입 메소드입니다. 템플릿 매개변수를 나타내는 키-값 쌍의 개체를 허용합니다.

const template = 'Example text: ${text}';
const result = template.interpolate({
  text: 'Foo Boo'
});
로그인 후 복사

여기서 템플릿 문자열에 보간 기능을 적용하여 매개변수 텍스트가 'Foo Boo'로 설정된 개체를 전달합니다. 이 함수는 매개변수 값에 대한 자리 표시자와 함께 JavaScript 템플릿 리터럴을 활용하여 템플릿 문자열을 생성합니다.

console.log(result);
로그인 후 복사

마지막으로 결과를 콘솔에 기록하면 다음과 같이 출력됩니다.

Example text: Foo Boo
로그인 후 복사

이 솔루션을 사용하면 일반 문자열을 템플릿 문자열로 동적으로 변환할 수 있으므로 JavaScript에서 템플릿 문자열이 제공하는 표현력과 가독성을 활용할 수 있습니다. 코드입니다.

위 내용은 `eval` 또는 `new Function`을 사용하지 않고 ES6 JavaScript에서 일반 문자열을 템플릿 리터럴로 변환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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