小窥TypeScript:字符串新特性

1）多行字符串

原js代码：

var str1 = "aaaa\nbbbbbb\ncccc\n";

var str2 = "aaaa\n" + 
           "bbbbbb\n" + 
           "cccc\n";

用ts代码来写：

var str1 = `aaaa
bbbbbb
cccc
`

这个符号是键盘上1左边的那个键。

2）字符串模板

原js代码：

var str1 = "hehehehe";
var getstr = function () {
    return "hahahaha";
};
console.log("" + str1);
console.log("" + getstr());

用ts代码来写：

var str1 = "hehehehe";
var getstr = function () {
    return "hahahaha";
}
console.log(`${str1}`);
console.log(`${getstr()}`)

可以直接在字符串里调用变量和方法，使用${}框起来，中间加上了变量名或者方法名。

该调用方法仅适合用`符括起来的字符串。

3）自动拆分字符串

原js代码：

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var aa = "hahahaha";
var getb = function () {
    return 33;
};
func1(__makeTemplateObject(["yoyoyoyo ", ", lalala", ""], ["yoyoyoyo ", ", lalala", ""]), aa, getb());

用ts代码来写：

function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var aa = "hahahaha";
var getb = function () {
    return 33;
}
func1`yoyoyoyo ${aa}, lalala${getb()}`

func1调用自动拆分给三个参数的时候，没有用到()，而是使用了`符号，这时会将字符串里的字符全部分配给第一个参数，而第一个变量分配给第二个参数，第二个变量法分配给了第三个参数。

控制台运行结果：

Array(3)0: "yoyoyoyo "1: ", lalala"2: ""length: 3raw: Array(3)0: "yoyoyoyo "1: ", lalala"2: ""length: 3__proto__: Array(0)__proto__: Array(0)
VM55:7 hahahaha
VM55:8 33