템플릿 리터럴 문자열 표현식
2020. 4. 8. 09:12ㆍ웹/Javascript(ES6+)
템플릿 리터럴 문자열 표현식
특징
-
기존에 없었던 새로운 기능
-
역따옴표(`) 사용
-
변수 사용의 편리성
-
여러 줄의 문자열의 경우, "\n" 을 넣어 개행
예제)
<html>
<body>
<label>Name : <input id="name" /></label>
<div id="greetings"></div>
<script>
(() => {
let inputName = document.getElementById('name'),
divGreetings = document.getElementById('greetings');
inputName.addEventListener("change", () => {
divGreetings.innerHTML = `Greetings : ${inputName.value.toUpperCae()}`;
});
})();
</script>
</body>
</html>-
<input> 태그로 입력 시, change 이벤트 핸들럴를 통해 별도의 <div> 태그에 보여줌
-
역따옴표(`)의 변수 설정은 ${} 안에서 이루어지며, 일반 변수 뿐만 아니라 함수 호출이나 계산식 등을 넣을 수 있음
예제)
(() => {
function Test(strings, ...values) {
console.log(strings);
console.log(values);
return "Test"
}
var str = "World";
console.log(Test `Test, ${str}!\n${2 * 2 + 2} End`);
})();
-- 출력 결과 --
(3) ["Test, ", "!↵", " End", raw: Array(3)]
(2) ["World", 6]
Test-
함수 뒤에 괄호를 사용하지 않고 템플릿 문자열 표현식 사용 시, 함수에 첫번째 인자로 변수값을 기준으로 나눈 문자열들을 배열로 넘김
-
또한, 각 변수를 이후의 인자로 넘김(values 배열로 나머지 값들을 받음)
출처
속깊은 JavaScript(양석익 지음)
'웹 > Javascript(ES6+)' 카테고리의 다른 글
| iterator 와 for-of (0) | 2020.04.10 |
|---|---|
| Rest, Spread 연산자 (0) | 2020.04.09 |
| Destructuring(구조 분해 할당) (0) | 2020.04.08 |
| 화살표 함수(Arrow Function) (0) | 2020.04.07 |
| 키워드 var, let, const 차이점 (0) | 2020.04.07 |