집 > 기사 > 웹 프론트엔드 > ES6 템플릿 문자열 예제 공유

ES6 템플릿 문자열 예제 공유

小云云원래의: 2018-01-26 16:44:121772검색

ES6에 도입된 새로운 유형의 문자열 리터럴 구문 - 템플릿 문자열. 기술적으로 설명하면 템플릿 문자열은 문자열 리터럴 내에 표현식을 포함하는 문자열 리터럴입니다. 쉽게 말하면 변수 함수가 추가된 문자열이다.

ES6은 템플릿 문자열을 제공하며 구문은 백틱을 사용합니다. 템플릿 문자열은 다음과 같은 세 가지 장점을 가지고 있습니다. multi-line text

inserting 변수는 문자열로 삽입 표현을 문자열로 삽입하는 표현식
기본 구문

템플릿 문자열 및 es5 문자열 선언은 다음과 같습니다. 같은.

// ES5
var name = 'xixi';
console.log(name);// xixi

// ES6
let name4ES6 = `一步`;
console.log(name4ES6);// 一步

다줄 텍스트

Jquery가 인기 있던 시대에는 html 조각을 이어붙인 다음 노드를 교체하는 경우가 많았습니다. 모든 사람이 경험할 수 있는 ES5 코드를 작성하세요.

var str = '<html>'
+ '<p>啦拉拉</p>'
+ '<p>xixixi</p>'
+ '</html>';
console.log(str);// <html><p>啦拉拉</p><p>xixixi</p></html>

ES6은 여러 줄의 텍스트를 지원하며 위 코드는 구현하기가 훨씬 쉽습니다.

let str4ES6 = `<html>
 <p>啦拉拉</p>
 <p>xixixix</p>
</html>`;

console.log(str4ES6);

변수나 표현식을 삽입할 수 있습니다.

// ES5
var name = 'xixi';
var age = 27;
var info = 'my name is ' + name + ' , age is ' + age + '.';
console.log(info);// my name is xixi , age is 27.

ES6 템플릿 문자열은 구현하기가 훨씬 쉽습니다. 핵심 구문은 ${}이며, 여기에는 모든 js 표현식을 삽입할 수 있습니다.

let name = 'xixi';
let age = 27;

let info = `my name is ${name}, my age is ${age}. just a test ${1 + 10}!`;
console.log(info);// my name is xixi, my age is 27. just a test 11!

Summary

ES6 템플릿 문자열은 매우 간단하고 사용하기 쉽습니다.

ES6 템플릿 문자열 예제 공유

관련 기사