ECMAScript 6에서 템플릿 문자열 리터럴을 사용하는 방법은 무엇입니까?

ES6 버전의 JavaScript에서는 리터럴이 도입되었습니다. JavaScript에는 객체 리터럴, 배열 리터럴, 숫자 리터럴, RegExp 리터럴 등이 포함됩니다. 또한 문자열 리터럴도 포함되어 있습니다.

문자열 리터럴을 사용하면 백슬래시 문자 없이 여러 줄로 된 문자열을 만들고, 따옴표 안에 단어나 문장을 추가하고, 문자열 사이에 변수와 수학 표현식을 추가할 수 있습니다.

문법

사용자는 다음 구문에 따라 ECMAScript 6에서 템플릿 문자열 리터럴을 사용할 수 있습니다.

으아악

위 구문에서는 백틱(``)을 사용하여 템플릿 리터럴 문자열을 생성합니다.

예제 1(여러 줄 문자열)

아래 예에서는 템플릿 리터럴 문자열을 사용하여 여러 줄 문자열을 만듭니다. 인용된 문자열을 만들 때마다 "

" 문자를 사용하여 새 줄을 만들어야 하지만 문자열 리터럴을 사용하면 새 줄에 문자열을 작성하여 이를 수행할 수 있습니다.

string1에서는 새 줄에 문자열을 써서 새 줄을 만들고, string2에서는 "

" 문자를 사용하여 새 줄을 만듭니다. 사용자는 출력에서 ​​string1과 string2를 관찰할 수 있으며 둘은 동일한 것으로 보입니다.

으아악

예 2(문자열의 따옴표)

템플릿 문자열 리터럴을 사용하여 문자열 안에 따옴표를 추가할 수 있습니다. 큰따옴표가 있는 문자열을 만들 때는 작은따옴표만 문자열에 추가할 수 있고, 작은따옴표가 있는 문자열을 만들 때는 큰따옴표만 문자열에 추가할 수도 있습니다.

문자열 리터럴을 사용하여 stringQuote 변수의 문자열에 작은따옴표를 추가했습니다.

으아악

예 3(문자열의 변수)

아래 예에서는 문자열에서 변수 대체를 수행했습니다. 일반적으로 문자열에서 변수를 사용하려면 "+" 연산자를 사용하고 여러 문자열을 연결해야 하지만 템플릿 문자열 리터럴을 사용하면 문자열에 직접 변수를 추가할 수 있습니다. ${} 표현식에 변수를 추가할 수 있습니다.

variableStr 변수의 값에는 name, job, timePeriod 변수를 삽입했습니다.

으아악

예제 4(문자열 표현)

이 예에서는 템플릿 문자열 리터럴을 사용하여 문자열에 수학적 표현식을 추가합니다. sumString에서는 ${} 내부에 수학 표현식을 추가했습니다. 사용자는 문자열에서 num1과 num2를 합하는 방법을 볼 수 있습니다.

또한 string2의 2개 값을 곱했습니다.

으아악

예제 5(문자열의 HTML)

템플릿 문자열 리터럴을 사용하여 HTML 줄을 만들고 웹 페이지에 추가할 수 있습니다. 이 예에서는 문자열 리터럴을 사용하여 HTML 목록을 만들고 innerHTML 속성을 사용하여 웹 페이지에 HTML 행을 추가합니다.

으아악

사용자는 JavaScript에서 템플릿 문자열 리터럴을 사용하는 방법을 배웠습니다. 여러 줄로 된 문자열, 변수 및 표현식 대체를 만들고, 따옴표를 추가하고, 템플릿 문자열 리터럴을 사용하여 HTML 줄을 만드는 방법을 살펴보았습니다.

위 내용은 ECMAScript 6에서 템플릿 문자열 리터럴을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!