ES6---新版字符串

ES5的字符串形式

var string = "12334" === var string = '12334'
var string = "<div><p>你好么</p></div>"
//ES5的字符串不支持换行，但是支持转义，上面等同于下面
var string = "<div>\
    <p>转义</p>\
    </div>"  //结果没有回车
//转义符必须在最后，如果后面有空格就会报错。

ES6语法糖的字符串形式

var string = `
    <div>
    <p>你好</p>
    </div>
` //结果包含回车

插入JS代码

var text = "你好"
//ES5的插入方式
var string = "<div>\
    <p>__text__</p>\
    </div>".replace('__text__',text)


//ES5插入方法二
var string = "<div>" +
    "<p> + text + </p>"+
    "</div>"

//ES6的方法${}
var string = `
    <div>
    <p>${text}</p>
    </div>
`
//其中${}的{}中可以加入任何的JS代码

函数接字符串 fn${name} 是一个 ${person}

• 在模板字符串前面加一个函数，可以让你有一次机会，根据插入的变量的值，来修改这个模板字符串最终的展示结果。
  比如：刚开始要展示的是哈哈是一个人，但最终展示的是哈哈是一个好人。

var name = '哈哈';
var person = '人'
//这个函数可以返回一个新的字符串
var fn = function(){
    let strings = arguments[0];
    let var1 = arguments[1];
    let var2 = arguments[2];
    if(var1 === '哈哈'){
        return var1 + strings[1] + '好人'
    }else {
        return var1 + string[1] + '坏人'
    }
};
fn`${name} 是一个 ${person}`;

• 作用：styled-component就是用的这个语法