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

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

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

.
    "그 사람은 <b>"+사람.이름+"</b>"+"이고 우리는 그의 "+사람.나이+"를 알고 싶습니다. 그게 전부입니다." 
    );

하지만 이 전통적인 접근 방식에서는 필요한 템플릿을 얻기 위해 ""(큰따옴표)와 +를 많이 사용해야 한다는 것을 알 수 있습니다. 그러나 이것은 매우 불편합니다.

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

$("#result").append(
  `그는 <b>${person.name}</b>이고 우리는 그의 ${person.age}을 알고 싶습니다.그게 전부입니다`
    );

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

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

` 나는 남자입니다.`

` 당신이 무엇을 하든

나는 당신을 믿습니다.`

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

var name="zzw";
` ${name}, 당신이 무엇을 하든,
 나는 당신을 믿습니다

.` 4. 백틱은 템플릿 문자열의 식별자이므로 문자열에서 백틱을 사용해야 하는 경우 다음과 같이 이스케이프해야 합니다.

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

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

console.log( `무엇을 하든 상관없습니다`,
 나는 당신을 믿습니다.`);

출력은 다음과 같습니다:

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

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

결과는 다음과 같습니다.

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

function string(){
  "zzw는 es6을 좋아합니다!"를 반환합니다.
}
console.log(`무슨 말씀을 하시겠습니까? ${string()}`)

결과는 다음과 같습니다.

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

function string(){
    666을 반환합니다.
  }
  console.log(`무슨 말씀을 하시겠습니까? ${string()}`)

결과는 다음과 같습니다.

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

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

console.log(`What do you want to say? Well, ${string( )}`);

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

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

console.log(`What do you want to say? 음, ${"사실 저는 변수가 아닙니다. ~"}`) ;

결과는 다음과 같습니다.

10. 템플릿 문자열 자체를 참조하려면 다음과 같이 작성할 수 있습니다.

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

결과는 다음과 같습니다.