집 > 기사 > 웹 프론트엔드 > ES6 템플릿 문자열을 사용하는 방법

ES6 템플릿 문자열을 사용하는 방법

이번에는 ES6 템플릿문자열 사용법과 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 expression을 넣을 수 있으며 작업을 수행하고 개체 속성을 참조할 수도 있습니다.

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"));

결과는 다음과 같습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 항목에 주목하세요. PHP 중국어 웹사이트의 기사!

관련 기사