WEB/JavaScript

[JavaScript]๋ฌธ์ž์—ด ์กฐ์ž‘ : template

developer of the night sky 2023. 10. 11. 12:33

๐Ÿ”ปtemplate๐Ÿ”ป

  • template String, template literals ๋ผ๊ณ ๋„ ํ•œ๋‹ค.
  • ES6(ECMAScript 2015)์—์„œ ์ถ”๊ฐ€๋œ ๋ฌธ์ž์—ด ํ‘œ๊ธฐ๋ฒ•์ด๋‹ค.
  • ๋ฐฑ์ฟผํŠธ ๋˜๋Š” ๋ฐฑํ‹ฑ(`) ์‚ฌ์šฉํ•˜์—ฌ ์ •์˜ํ•˜๋ฉฐ, ${}๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋‚˜ ํ‘œํ˜„์‹์„ ์‰ฝ๊ฒŒ ๋ฌธ์ž์—ด ์•ˆ์— ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

JavaScript ๋ฌธ์ž์—ด ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ์•„๋ž˜ 3๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

1. 'string'

2. "string"

3. `string` > template string

    <script>
        let a = 'ํ™๊ธธ๋™';
        let b = "ํ™๊ธธ๋™";
        let c = `ํ™๊ธธ๋™`;

        console.log(a === b);   //true
        console.log(a === c);   //true
    </script>

ํ‘œ๊ธฐ๋ฒ•์€ ์–ด๋–ค ๊ฒƒ์œผ๋กœ ํ•˜๋“ ์ง€ ํ˜•์‹์€ ๋™์ผํ•˜๋‹ค.

 

template ์‚ฌ์šฉ๋ฒ•

    <script>

        let name = 'ํ™๊ธธ๋™';
        let age = '20';

        console.log(`์ด๋ฆ„์€ ${name}์ด๊ณ , ๋‚˜์ด๋Š” ${age}์„ธ์ž…๋‹ˆ๋‹ค.`)

    </script>

 

    <script>

        let temp = `
            ํ•˜๋‚˜
            ๋‘˜
            ์…‹`;
        console.log(temp);

        let temphtml = `
            <tr>
                <td>text</td>
            </tr>
            <tr>
                <td>text</td>
            </tr>`;

    </script>

 

innerHTML์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๋˜๋Š” ๋‹ค๋Ÿ‰์˜ ํ…์ŠคํŠธ๋ฅผ ์กฐ์ž‘ํ•  ๋•Œ ์—”ํ„ฐ๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ๋‹ค.