ES6에 추가된 새로운 요소는 템플릿 리터럴입니다. 여러 줄 문자열을 생성하고 문자열에 표현식을 포함하는 기능과 같은 몇 가지 중요한 새 기능을 추가한 JavaScript에서 문자열을 생성하기 위한 새로운 유형입니다. 개발자는 이러한 모든 기능을 통해 문자열을 조작하고 동적 문자열을 생성할 수 있는 능력을 향상시킬 수 있습니다.
이 게시물에서는 템플릿 리터럴과 JavaScript에서 템플릿 리터럴을 사용하는 방법을 설명합니다.
JavaScript 템플릿 리터럴(템플릿 문자열)이란 무엇입니까?
' 템플릿 리터럴 '는 일반적으로 ' 템플릿 문자열 '. 백틱( ' ) 문자, 문자열의 따옴표와 비교합니다. 그 자리 표시자는 달러 기호로 표시됩니다. $ ' 및 중괄호 {} 처럼 ' ${표현식} '는 템플릿 리터럴에서 허용됩니다. 표현을 사용하고 싶다면 ' ${표현식} ” 백틱 안의 상자.
템플릿 리터럴은 표준 JavaScript 문자열의 향상된 버전입니다. 대체는 템플릿 리터럴과 일반 문자열을 크게 구분합니다. 대체를 사용하여 변수와 표현식을 문자열로 통합할 수 있습니다. 이러한 변수와 표현식의 값은 JavaScript 엔진에 의해 자동으로 대체됩니다.
통사론
템플릿 리터럴을 사용하여 단일 문자열을 선언하려면 아래 구문을 사용하십시오.
` 문자열 텍스트 `
여러 줄의 경우 주어진 구문을 따르십시오.
` 문자열 텍스트 줄 1
문자열 텍스트 줄
백틱 내부에 표현식을 추가하려면 다음 구문이 사용됩니다.
명시된 개념을 더 잘 이해하려면 다음 예를 확인하십시오.
예 1: JavaScript 템플릿 리터럴을 사용하여 한 줄 문자열 선언
일반적으로 문자열을 생성하려면 작은따옴표나 큰따옴표를 사용해야 하지만 템플릿 리터럴에서는 다음과 같이 문자열을 생성할 수 있습니다.
console.log ( ` 리눅스 힌트 ` ) ;
출력은 작은 따옴표 또는 큰 따옴표를 사용하여 간단한 문자열 생성과 동일하게 작동함을 보여줍니다.
예제 2: JavaScript 템플릿 리터럴을 사용하여 여러 줄 문자열 선언
일반적으로 여러 줄을 인쇄할 때 연결 연산자(+)를 사용하고 새 줄을 추가하기 위해 (\n)을 사용할 수 있으므로 코드가 복잡해지는 경우가 많습니다.
console.log ( 'LinuxHint에 오신 것을 환영합니다. \N ' + '기술 학습을 위한 최고의 웹사이트.' ) ;
템플릿 리터럴을 사용하는 동안 백틱 블록의 키보드에서 Enter 키를 눌러 새 줄을 시작할 수 있습니다.
최고의 웹사이트 ~을 위한 학습 기술. ` ) ;
산출
예 3: 표현식 대체가 있는 문자열
여기에서 먼저 두 개의 변수 ' 엑스 ' 그리고 ' 와이 ', 값 ' 이십 ' 그리고 ' 열 다섯 ', 각각:
변수 x = 이십 ;변수 Y = 열 다섯 ;
그런 다음 변수 ' 합집합 '를 추가하려면 ' 엑스 ' 그리고 ' 와이 ':
두 개의 숫자를 더하고 이 숫자의 합을 콘솔에 표시하려면 일반적으로 문자열과 변수를 일반 문자열 형식으로 연결해야 하므로 문자열과 함께 작은따옴표나 큰따옴표를 반복적으로 사용하고 결합하는 데 혼란이 자주 발생합니다. ( + ):
반면 템플릿 리터럴을 사용하면 변수가 있는 문자열만 ' ${} ' 백틱 블록에서:
산출
템플릿 리터럴과 관련된 모든 필수 정보를 수집했습니다.
결론
' 템플릿 리터럴 ', 또한 ~으로 알려진 ' 템플릿 문자열 '는 백틱( ' ) 문자, 문자열의 따옴표와 비교합니다. 연결 연산자를 사용하지 않고 한 줄 및 여러 줄 문자열을 만들 수 있으며 문자열에 표현식을 포함합니다. 이 게시물에서는 설명된 예제와 함께 JavaScript의 템플릿 리터럴에 대해 설명했습니다.