[Day04] JavaScript - ES6 模板字符串 (Template Literal)

ES6 除了新增了上篇的let & const之外，也提供了新的模版字符串（Template Literal）用法:

• 范例一:

  • 过去写法(ES5): 过去我们习惯使用 "+" 来做字串的相加。

    
    let example_es5 = '<div>\n'+
    '<div class="container">\n'+
    '<img src="example_pic.jpg"\n'+
    '</div>\n'+
    '</div>'
    

  • 现在写法(ES6): 模板字串支援换行符号，就不需使用\n表示换行。

        let example_es6 = `
        <div>
            <div class='container'>
                <img src="example_pic.jpg>
            </div>
        </div>`
    

• 范例二

  • 过去写法(ES5): 过去我们也习惯使用 "+" 来做变数的相加。

    let a = 'Lisa';
    let b = '20';
    let c = 'My name is ' + a + ', I am ' + b + ' years old.';
    

  • 现在写法(ES6): 在模板字串下，可以透过${ }的方式放入变数。

    let a = 'Lisa';
    let b = '20';
    let c = `My name is ${a}, I am ${b} years old.`;