ES6 템플릿 문자열 예제 공유-JS 튜토리얼-php.cn

ES6 템플릿 문자열 예제 공유

小云云

풀어 주다： 2018-01-26 16:44:12

원래의

1719명이 탐색했습니다.

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 템플릿 문자열은 매우 간단하고 사용하기 쉽습니다.

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

ES6 템플릿 문자열 예제 공유