ES6에서 템플릿 문자열의 구체적인 사용

이 기사에서는 javascript에 대한 관련 지식을 주로 소개하며, 주로 코드를 기반으로 템플릿 문자열의 관련 내용을 분석하는 데 도움이 되기를 바랍니다. 모든 사람.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

저는 최근 프로젝트에서 ES6 템플릿 문자열을 사용했는데, 여기에 요약되어 있습니다.

1. 이전에는 일반적으로 다음과 같이 JavaScript를 사용하여 템플릿 문자열을 출력할 수도 있었습니다.

$("#result").append(
    "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
    );

그러나 이러한 전통적인 접근 방식에는 많은 수의 ""(큰따옴표)와 +를 함께 연결해야 한다는 것을 알 수 있습니다. 필요한 템플릿을 얻으려면. 그러나 이것은 매우 불편합니다.

그래서 ES6에서는 `(백틱)으로 표시되고 변수는 ${}로 묶인 템플릿 문자열을 제공합니다. 위의 예는 템플릿 문자열을 사용하여 다음과 같이 작성할 수 있습니다.

$("#result").append(
  `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
    );

이 접근 방식은 더 이상 문자열과 변수를 연결하기 위해 많은 "" 및 +를 사용할 필요가 없습니다.

2. 물론 템플릿 문자열은 변수를 도입할 수 있으며, 변수를 사용하지 않는 것도 가능합니다. 아래와 같이:

` 나는 남자입니다.`

` 당신이 무엇을 하든

나는 당신을 믿습니다.`

3 변수를 먼저 정의한 다음 템플릿 문자열에 변수를 포함할 수도 있습니다. :

var name="zzw";
` ${name},no matter what you do,
 I trust you.`

4 분명히 백틱은 템플릿 문자열의 식별자이므로 문자열에 백틱을 사용해야 하는 경우 아래와 같이 이스케이프해야 합니다.

`무엇을 하든 상관없습니다` ,
나는 당신을 믿습니다.`

5. 참고: 여러 줄의 문자열을 나타내기 위해 템플릿 문자열을 사용하는 경우 모든 공백과 들여쓰기가 출력에 저장됩니다! !

console.log( `No matter\` what you do,
 I trust you.`);

출력 결과는 다음과 같습니다.

6. ${}의 중괄호 안에 JavaScript 표현식을 넣고 작업을 수행하고 개체 속성을 참조할 수 있습니다.

var x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`);

결과는 다음과 같습니다.

7. 더욱 강력합니다. 템플릿 문자열은 함수를 호출할 수도 있습니다.

function string(){
  return "zzw likes es6!";
}
console.log(`你想说什么?嗯，${string()}`);

결과는 다음과 같습니다.

또한, 함수가 문자열이 아닌 경우 일반 규칙에 따라 문자열로 변환됩니다.

function string(){
    return 666;
  }
  console.log(`你想说什么? 嗯，${string()}`);

결과는 다음과 같습니다.

여기서 실제로 숫자 666은 문자열 666으로 변환됩니다.

8. ${}에 있는 경우 변수의 이름이 지정되지 않은 경우 오류가 보고됩니다.

console.log(`你想说什么? 嗯，${string()}`);

위 코드에서는 string() 함수가 선언되지 않았으므로 오류가 보고됩니다.

9 실제로 ${} 문자열을 입력할 수도 있습니다. 지식 결과는 여전히 문자열을 반환합니다.

console.log(`你想说什么?嗯，${"其实我不是变量~"}`);

결과는 다음과 같습니다.

10. 문자열 자체를 다음과 같이 작성할 수 있습니다.

let str="return"+"`Hello! ${name}`";
let func=new Function("name",str);
 console.log(func("zzw"));

결과는 다음과 같습니다.

위 내용은 ES6에서 템플릿 문자열의 구체적인 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!