JavaScript์์ ํ ํ๋ฆฟ ๋ฌธ์์ด(Template Strings) ๋๋ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด(Template Literals)์ ES6(ECMAScript 2015)์์ ๋์ ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ ์ค ํ๋๋ก, ๋ฌธ์์ด์ ์ฒ๋ฆฌํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. ํ ํ๋ฆฟ ๋ฌธ์์ด์ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ ์ค์ ๋ฌธ์์ด์ ์ฝ๊ฒ ์์ฑํ๊ฑฐ๋, ๋ณ์์ ํํ์์ ๋ฌธ์์ด ๋ด์ ์ฝ์ ํ ์ ์์ต๋๋ค. ์ด ๊ธ์์๋ JavaScript ํ ํ๋ฆฟ ๋ฌธ์์ด์ ๊ฐ๋ ๊ณผ ๋ค์ํ ํ์ฉ ๋ฐฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
ํ ํ๋ฆฟ ๋ฌธ์์ด(Template Strings)์ด๋?
ํ
ํ๋ฆฟ ๋ฌธ์์ด์ ๊ธฐ์กด์ ์์ ๋ฐ์ดํ('
)๋ ํฐ ๋ฐ์ดํ("
) ๋์ , ๋ฐฑํฑ(backtick, `
)์ผ๋ก ๊ฐ์ธ์ ์์ฑํ๋ ๋ฌธ์์ด์
๋๋ค. ์ด๋ฅผ ํตํด ์ผ๋ฐ ๋ฌธ์์ด๋ณด๋ค ๋ ๋ง์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
let text = `์ด๊ฒ์ ํ
ํ๋ฆฟ ๋ฌธ์์ด์
๋๋ค!`;
ํ ํ๋ฆฟ ๋ฌธ์์ด์ ๋ค์๊ณผ ๊ฐ์ ์ฅ์ ๋ค์ ์ ๊ณตํฉ๋๋ค:
- ์ฌ๋ฌ ์ค ๋ฌธ์์ด ์์ฑ
- ๋ฌธ์์ด ๋ด์ ๋ณ์์ ํํ์ ์ฝ์
- ๊ฐ๋ ์ฑ ๋์ ๋ฌธ์์ด ์ฒ๋ฆฌ
ํ ํ๋ฆฟ ๋ฌธ์์ด์ ์ฃผ์ ๊ธฐ๋ฅ
1. ์ฌ๋ฌ ์ค ๋ฌธ์์ด ์์ฑ
ํ
ํ๋ฆฟ ๋ฌธ์์ด์ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ ์ค์ ๊ฑธ์น ๋ฌธ์์ด์ ์ฝ๊ฒ ์์ฑํ ์ ์์ต๋๋ค. ๋ฐฑํฑ(`
) ์์ ์ค๋ฐ๊ฟ ๋ฌธ์๋ฅผ ํฌํจ์ํฌ ์ ์์ผ๋ฉฐ, ์ด๋ ๊ธฐ์กด ๋ฌธ์์ด์์ \n
์ ์ฌ์ฉํด์ผ ํ๋ ๋ถํธํจ์ ํด์ํด์ค๋๋ค.
let message = `์ด๊ฒ์ ์ฌ๋ฌ ์ค์ ๊ฑธ์น
ํ
ํ๋ฆฟ ๋ฌธ์์ด ์์์
๋๋ค.
๋ฐฑํฑ์ ์ฌ์ฉํ์ฌ ์์ฑํฉ๋๋ค.`;
console.log(message);
์ ์์ ์์๋ ์ฌ๋ฌ ์ค์ ๊ฑธ์น ๋ฌธ์์ด์ ์์ฑํ๊ณ ์ถ๋ ฅํฉ๋๋ค. ์ค๋ฐ๊ฟ์ด ๊ทธ๋๋ก ์ ์ง๋๋ฏ๋ก, ๊ฐ๋ ์ฑ์ด ๋ฐ์ด๋ฉ๋๋ค.
2. ๋ณ์์ ํํ์ ์ฝ์ (๋ฌธ์์ด ๋ณด๊ฐ)
ํ
ํ๋ฆฟ ๋ฌธ์์ด์ ์ฌ์ฉํ๋ฉด ๋ณ์์ ํํ์์ ์ฝ๊ฒ ๋ฌธ์์ด ๋ด์ ์ฝ์
ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ๋ฌธ์์ด ๋ณด๊ฐ(String Interpolation)์ด๋ผ๊ณ ํ๋ฉฐ, ${}
๊ตฌ๋ฌธ์ ์ฌ์ฉํ์ฌ ๋ณ์๋ ํํ์์ ๋ฌธ์์ด ์์ ํฌํจ์ํฌ ์ ์์ต๋๋ค.
let name = "Alice";
let age = 25;
let message = `์๋
ํ์ธ์, ์ ์ด๋ฆ์ ${name}์ด๊ณ ๋์ด๋ ${age}์ด์
๋๋ค.`;
console.log(message); // ๊ฒฐ๊ณผ: "์๋
ํ์ธ์, ์ ์ด๋ฆ์ Alice์ด๊ณ ๋์ด๋ 25์ด์
๋๋ค."
์ ์์ ์์ ${name}
๊ณผ ${age}
๋ ๋ณ์์ ๊ฐ์ ๋ฌธ์์ด์ ์ฝ์
ํ์ฌ ์ถ๋ ฅํฉ๋๋ค. ์ด ๋ฐฉ์์ ๊ธฐ์กด์ ๋ฌธ์์ด ์ฐ๊ฒฐ ๋ฐฉ์๋ณด๋ค ํจ์ฌ ๊ฐ๊ฒฐํ๊ณ ์ง๊ด์ ์
๋๋ค.
3. ํํ์ ์ฝ์
ํ ํ๋ฆฟ ๋ฌธ์์ด ๋ด์์๋ ๋จ์ํ ๋ณ์๋ฟ๋ง ์๋๋ผ, ๊ณ์ฐ์๊ณผ ํจ์ ํธ์ถ ๋ฑ์ ํํ์(Expression)๋ ์ฝ์ ํ ์ ์์ต๋๋ค.
let a = 10;
let b = 20;
let result = `a + b = ${a + b}`;
console.log(result); // ๊ฒฐ๊ณผ: "a + b = 30"
์ ์์ ์์๋ ${a + b}
ํํ์์ ๋ฌธ์์ด ๋ด์์ ๊ณ์ฐํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ์ฝ์
ํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋์ ์ผ๋ก ๊ณ์ฐ๋ ๊ฐ์ ๋ฌธ์์ด์ ํฌํจํ ์ ์์ต๋๋ค.
4. ํจ์ ํธ์ถ ์ฝ์
ํ ํ๋ฆฟ ๋ฌธ์์ด ์์์ ํจ์๋ฅผ ํธ์ถํ์ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ๋ก ๋ฌธ์์ด์ ํฌํจํ ์ ์์ต๋๋ค.
function greet(name) {
return `Hello, ${name}!`;
}
let message = `${greet("Bob")}`;
console.log(message); // ๊ฒฐ๊ณผ: "Hello, Bob!"
ํจ์๋ฅผ ํธ์ถํ์ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ํ ํ๋ฆฟ ๋ฌธ์์ด์ ์ฝ์ ํ๋ ๋ฐฉ์์ผ๋ก, ๋์ ์ธ ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ์์ฑํ ์ ์์ต๋๋ค.
ํ ํ๋ฆฟ ๋ฌธ์์ด๊ณผ ๊ธฐ์กด ๋ฌธ์์ด ์ฐ๊ฒฐ ๋ฐฉ์ ๋น๊ต
ํ ํ๋ฆฟ ๋ฌธ์์ด์ ์ฌ์ฉํ๋ฉด ๊ธฐ์กด์ ๋ฌธ์์ด ๊ฒฐํฉ ๋ฐฉ์๋ณด๋ค ๋ ๊ฐ๊ฒฐํ๊ฒ ๋ฌธ์์ด์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ๋ค์์ ๊ธฐ์กด ๋ฌธ์์ด ๊ฒฐํฉ ๋ฐฉ์๊ณผ ํ ํ๋ฆฟ ๋ฌธ์์ด์ ๋น๊ตํ ์์ ์ ๋๋ค.
๊ธฐ์กด ๋ฌธ์์ด ๊ฒฐํฉ ๋ฐฉ์
let name = "Alice";
let age = 25;
let message = "์๋
ํ์ธ์, ์ ์ด๋ฆ์ " + name + "์ด๊ณ ๋์ด๋ " + age + "์ด์
๋๋ค.";
console.log(message);
ํ ํ๋ฆฟ ๋ฌธ์์ด ๋ฐฉ์
let name = "Alice";
let age = 25;
let message = `์๋
ํ์ธ์, ์ ์ด๋ฆ์ ${name}์ด๊ณ ๋์ด๋ ${age}์ด์
๋๋ค.`;
console.log(message);
ํ
ํ๋ฆฟ ๋ฌธ์์ด์ ์ฌ์ฉํ ๋ฐฉ์์ด ํจ์ฌ ๊ฐ๊ฒฐํ๋ฉฐ, ๊ฐ๋
์ฑ์ด ๋ฐ์ด๋ฉ๋๋ค. ๊ธฐ์กด ๋ฐฉ์์์๋ ๋ฌธ์์ด๊ณผ ๋ณ์๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ๊ฒฐํฉํด์ผ ํ์ง๋ง, ํ
ํ๋ฆฟ ๋ฌธ์์ด์์๋ ${}
๊ตฌ๋ฌธ๋ง์ผ๋ก ์ฝ๊ฒ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
HTML ๋ฌธ์์ด ์์ฑ์ ํ ํ๋ฆฟ ๋ฌธ์์ด ์ฌ์ฉ
ํ ํ๋ฆฟ ๋ฌธ์์ด์ HTML ์ฝํ ์ธ ๋ฅผ ๋์ ์ผ๋ก ์์ฑํ ๋๋ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ฉ๋๋ค. ์ฌ๋ฌ ์ค์ ๊ฑธ์น HTML ๊ตฌ์กฐ๋ฅผ ์ฝ๊ฒ ์์ฑํ๊ณ , ๋์ ์ธ ๋ฐ์ดํฐ๋ฅผ ์ฝ์ ํ ์ ์์ต๋๋ค.
let name = "John";
let age = 30;
let html = `
${name}
๋์ด: ${age}
`;
console.log(html);
์ ์์ ์์๋ ํ
ํ๋ฆฟ ๋ฌธ์์ด์ ์ฌ์ฉํ์ฌ HTML ๊ตฌ์กฐ๋ฅผ ์์ฑํ๊ณ , ๋ณ์ name
๊ณผ age
๊ฐ์ ์ฝ์
ํ์ต๋๋ค. HTML ํ
ํ๋ฆฟ์ ๋์ ์ผ๋ก ์์ฑํ ๋ ๋งค์ฐ ์ ์ฉํ ๋ฐฉ์์
๋๋ค.
๊ฒฐ๋ก
JavaScript ํ ํ๋ฆฟ ๋ฌธ์์ด์ ์ฌ๋ฌ ์ค์ ๋ฌธ์์ด์ ์์ฑํ๊ฑฐ๋, ๋ณ์์ ํํ์์ ์ฝ๊ฒ ์ฝ์ ํ ์ ์๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ๊ฐ๋ ์ฑ์ด ์ข๊ณ ๊ฐ๊ฒฐํ ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ผ๋ฉฐ, ํนํ HTML ๊ตฌ์กฐ๋ฅผ ๋์ ์ผ๋ก ์์ฑํ ๋ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค. ํ ํ๋ฆฟ ๋ฌธ์์ด์ ๋ค์ํ ๊ธฐ๋ฅ์ ์ตํ๊ณ , ํ๋ก์ ํธ์์ ์ ๊ทน์ ์ผ๋ก ํ์ฉํด๋ณด์ธ์!
๋๊ธ ์ฐ๊ธฐ