ES6에서 템플릿 문자열 사용에 대한 자세한 설명

이번에는 ES6에서 템플릿 문자열 사용에 대해 자세히 설명하겠습니다. ES6에서 템플릿 문자열을 사용할 때 주의 사항은 무엇입니까?

앞에 쓰기

ES6에 대해서는 2015년 7월 18일에 드디어 출시되었습니다. 먼지가 가라 앉았습니다. 주요 브라우저는 아직 완전한 지원을 제공하지 않지만, 그렇다고 해서 시도해 보고 싶은 마음이 생기는 것은 아닙니다. 백엔드에서는 Node.js(0.12+) 또는 io.js의 경우 프런트 엔드는 Babel 또는 Traceur를 사용하여 구문을 ES5로 사전 이스케이프할 수도 있습니다.

이 시리즈에 관해서 (시리즈가 될 수 있을지 모르겠어요, 항상 게으른 편입니다), 배울 콘텐츠를 무작위로 선택하겠습니다. 누구나 적극적으로 오류를 수정하고 토론을 위한 메시지를 남길 수 있습니다.

템플릿 문자열

Usage

// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`  // Hello Bob, how are you today?

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

먼저 이전 문자열 사용을 살펴보겠습니다.

/**
 * Before ES6 字符串拼接
 */
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
  var tpl = '公司名：' + name + '\n'+
      '简介：'+ desc;
  return tpl;
}

그리고 지금:

var html = `公司名：${name}
  简介：${desc}`;

매우 간단합니다.

MDN의 템플릿 문자열 정의에서 인용:

템플릿 문자열은 일반 문자열의 큰따옴표와 작은따옴표 대신 역따옴표()를 사용합니다. 템플릿 문자열에는 특정 구문(${expression})에 대한 자리 표시자가 포함될 수 있습니다. 자리 표시자의 expression은 주변 텍스트와 함께 모든 부분을 연결하는 기본 함수로 전달됩니다.

자리 표시자 ${}는 js 표현식(함수 또는 작업)이거나 다른 템플릿 문자열일 수도 있으며 계산된 결과는 문자열로 출력됩니다. $ 및 {와 같은 문자열을 템플릿에서 사용해야 하는 경우 이스케이프해야 합니다.

이해하려면 예를 살펴보십시오.

rreee

일반 문자열과 달리 템플릿 문자열은 여러 줄에 작성할 수도 있습니다. 템플릿 문자열의 모든 공백, 새 줄 및 들여쓰기는 생성된 문자열에 그대로 출력됩니다.

그러나 간단한 템플릿 문자열에는 여전히 많은 제한 사항이 있습니다. 예:

1. 특수 문자열은 자동으로 이스케이프할 수 없습니다. (이것은 쉽게 주입 공격으로 이어질 수 있습니다.)

2. 국제화 라이브러리에서는 제대로 작동하지 않습니다. (즉, 특정 언어의 숫자, 날짜, 텍스트 등의 형식을 지정하지 않습니다.)

3. 내장 루프가 없습니다. 구문, (조건문도 지원하지 않으며 템플릿 중첩 방식만 사용할 수 있습니다.)

태그된 템플릿

이를 위해 라벨 템플릿이라는 개념이 도입되었습니다. 태그 템플릿은 백틱 앞에 태그를 삽입합니다. 이 태그는 사용자 정의된 템플릿 문자열 뒤에 값을 반환하는 함수입니다. 위의 특수 문자 문자열을 예로 들어 보겠습니다.

rreee

label 함수는 여러 매개변수를 받습니다.

1. 첫 번째 매개변수는 문자열 리터럴을 포함하는 배열입니다(즉, 변수 대체가 없는 값)

2. 다음 매개변수는 대체 후의 변수 값입니다

변경 예시 1

var x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}` // "1 + 2 = 3"

태그의 매개변수는 ['회사명:', '소개:'], 'Doctor Lilac', 'Doctor Lilac은 대중을 위한 인기 있는 과학 성 건강 웹사이트입니다.'입니다.

이러한 방법을 사용하면 통제력이 크게 향상됩니다. 위에서 언급했듯이 국제화 라이브러리와 심지어 루프 문도 있습니다.

브라우저 호환성

1. 서버 측, io.js는

2. 브라우저 측, FF34+, chrome 41+

3. mobile IOS 8, Android 4.4

4. IE Tech Preview

을 지원합니다. 이 사례를 읽으신 후 마스터하셨으리라 믿습니다. 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 자료:

Bootstrap

js에서 테이블을 작동하여 밀리초 + 일 + 시간 + 분과 초를 변환하는 방법

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