Programming/JavaScript
[JavaScript] Template String (Template Literal)
Isaac S. Lee
2023. 10. 11. 12:43
🍁Template String
Template String은 ES6때 만들어진 문자열 표기법이다.
템플릿 문자열은 역따옴표(backticks)로 문자열을 감싸고, 변수나 표현식을 ${} 안에 넣어 문자열을 보다 효과적으로 결합할 수 있도록 해준다.
let name = 'isaac';
let age = 20;
console.log('이름은 ' + name + '이고, 나이는 ' + age + '세 입니다.');변수를 만들어서 문자열로 출력을 하고 싶다.
위와 같이 사용할 수도 있지만, 이때 사용할 수 있는 문자열 표기법이 존재한다.
문자열 표기법
- 'string'
- "string"
- `string` : template string
3개의 표기법 모두 같지만, `string` 방식의 문자열 표기법을 사용하면 ${}의 문자열을 사용할 수 있게 된다.
`string`의 사용
문자열의 출력
let a = 'isaac';
let b = "isaac";
let c = `isaac`;
console.log(a === c);
console.log(b === c);
console.log(`이름은 ${name}이고, 나이는 ${age}세 입니다.`);
${} 안에 변수를 넣어서 문자열을 출력할 수 있다.
연산과 객체 사용
console.log(`이름은 ${name}이고, 나이는 ${age+5}세 입니다.`);
console.log(`현재 시간은 ${new Date()}입니다.`);
이렇게 작성한 문자열 표기법은 연산이 가능하며, 객체를 넣을 수도 있다.
다량의 태그와 텍스트의 개행
<body>
<script>
let temp = `
Uno
Dos
Tres
`;
console.log(temp);
</script>
</body>
<body>
<script>
let temphtml = `
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
`;
console.log(temphtml);
</script>
</body>
다량의 태그나 텍스트를 작성할 때 개행(Enter)을 넣을 수 있다는 게 템플릿 문자열의 큰 특징이다.
