템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.
이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.
템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) 을 이용합니다.
여러줄의 문자열 사용하기
예전에는 여러 줄의 내용을 입력하려면 newline characters(\n)를 사용하여 입력하거나 +(문자열 결합 연산자)를 이용하여 사용했었습니다.
|
let multiLine1= "첫번째줄\n두번째줄\n세번째줄";
let multiLine2 = "첫번째줄\n";
multiLine2 += "두번째줄\n";
multiLine2 += "세번째줄\n";
|
|
let multiLine= `첫번째줄
두번째줄
세번째줄
`;
|
template_literals_ex01.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template literals</title>
<script>
// `(BackTick, 백틱) 사용
console.log(`\`` === "`"); // --> true
console.log('-'.repeat(50));
let line1 = '첫번째줄\n두번째줄\n세번째줄';
let line2 = `첫번째줄
두번째줄
세번째줄
`;
console.log(line1)
console.log('-'.repeat(50));
console.log(line2)
document.write(line1);
document.write(`<hr>`);
document.write(line2);
document.write(`<hr>`);
document.write(line2.replaceAll('\n','<br>'));
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
자바스크립트 표현식 사용
템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(``) 을 이용합니다.
템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다. 모든 표현 가능한 자바스크립트 코드를 사용가능합니다.
template_literals_ex02.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template literals</title>
<script>
let name='한사람';
let age = 22;
let gender = true;
console.log(name + "(" + age + "세, " + (gender?"남자":"여자") + ")");
document.write(name + "(" + age + "세, " + (gender?"남자":"여자") + ")<br>");
console.log(`${name}(${age}세, ${gender ? "남자": "여자"})`);
document.write(`${name}(${age}세, ${gender ? "남자": "여자"})<br>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
템플릿 문자열을 이용한 함수의 호출
백틱(`)은 함수를 호출할때도 쓰입니다.
이전에는 함수를 호출할때 괄호( )를 이용해서 호출했습니다.
함수를 호출할때 괄호 대신에 백틱을 사용해도 가능합니다.
다만, 백틱(`)을 사용할 경우에는 매개변수가 문자열로 인식됩니다.
template_literals_ex03.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template literals</title>
<script>
let fn = (x) => x + 1;
console.log(fn(3));
console.log(fn`3`);
document.write(fn(3) + "<br>");
document.write(fn`3` + "<br>");
let isPositive = (x) => x == 0 ? '0' : x > 0 ? '양수' : '음수';
console.log(isPositive(1));
console.log(isPositive(0));
console.log(isPositive(-1));
document.write(`${isPositive`1`}<br>`);
document.write(`${isPositive`0`}<br>`);
document.write(`${isPositive`-1`}<br>`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
()로 함수를 호출하면 숫자로 인식해서 "4"가 출력되는데 ``으로 호출하면 문자열로 인식해서 "31"이 출력됩니다.
템플릿 문자열 안의 표현식에서 `(backtick)을 사용해도 됩니다.
Nesting templates(템플릿의 중첩)
템플릿 리터럴을 중첩해서 사용이 가능합니다.
문자열을 중첩해서 사용하면 한결 처리가 쉽습니다.
template_literals_ex04.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template literals</title>
<script>
let isLargeScreen = false;
let item = {}
item.isCollapsed = true;
// ES5
let classes = "header ";
classes += isLargeScreen
? ""
: item.isCollapsed
? "icon-expander"
: "icon-collapser";
console.log(classes);
// ES2015에서 중첩(nesting)없이 템플릿 리터럴 사용한 경우
classes = `header ${isLargeScreen ? "" : item.isCollapsed ? "icon-expander" : "icon-collapser"}`;
console.log(classes);
// ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우
item.isCollapsed = false;
classes = `header ${isLargeScreen ? "" : `icon-${item.isCollapsed ? "expander" : "collapser"}`}`;
console.log(classes);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
Tagged templates
template literals 의 더욱 발전된 한 형태는 tagged templates 입니다.
템플릿문자열을 이용하여 함수를 호출하면 첫번째 매개변수에는 표현식이외의 문자열이 배열형태로 전달이되고 두번째부터의 매개변수에는 표현식들이 차례대로 전달이 됩니다.
전개 연산자를 이용하여 표현식들을 배열로 받아도 됩니다.
template_literals_ex05.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template literals</title>
<script>
let person = '한사람';
let age = 22;
// 첫번째 매개변수에는 변수 이외의 값이 배열로 전달되고
// 두번째 부터의 매개변수에는 템플릿 리터럴의 표현식이 차례로 전달됩니다.
function transform1(strings, personExp, ageExp) {
console.log('-'.repeat(60));
console.log(`strings[0] : [${strings[0]}]`);
console.log(`strings[1] : [${strings[1]}]`);
console.log(`strings[2] : [${strings[2]}]`);
console.log(`personExp : [${personExp}]`);
console.log(`ageExp : [${ageExp}]`);
console.log('-'.repeat(60));
return strings[0] + personExp + strings[1] + ageExp + strings[2]
}
let result = transform1`반갑습니다!! ${person}씨의 나이는 ${age}세입니다.`;
console.log(`결과 : ${result}`);
//
function transform2(staticData, ...dynamicData) {
console.log('-'.repeat(60));
console.log(`staticData : [${staticData}]`);
console.log(`dynamicData : [${dynamicData}]`);
console.log('-'.repeat(60));
return staticData[0] + dynamicData[0] + staticData[1] + dynamicData[1] + staticData[2]
}
result = transform2`반갑습니다!! ${person}씨의 나이는 ${age}세입니다.`;
console.log(`결과 : ${result}`);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
Raw strings
태그 지정된 템플릿의 첫 번째 함수 인수에서 사용할 수있는 특별한 raw property을 사용하면
escape sequences 처리하지 않고 원시 문자열을 입력 한대로 액세스 할 수 있습니다.
let path = "c:\\path\\path2\\file.txt"; path = String.raw`c:\path\path2\file.txt`; |
template_literals_ex06.html 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template literals</title>
<script>
let path = "c:\\path\\path2\\file.txt";
console.log(path);
path = String.raw`c:\path\path2\file.txt`;
console.log(path);
</script>
</head>
<body>
</body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] var의 문제점 (0) | 2024.10.18 |
|---|---|
| [JavaScript] 화살표 함수(Arrow Function) (2) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 함수에서 사용 (2) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 객체의 결합/복사 (1) | 2024.10.17 |
| [JavaScript] Spread Operator(전개 연산자) 배열의 결합/복사 (0) | 2024.10.17 |
