正文
02-TypeScript中新的字符串
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
TypeScript中引入了字符串模板，通过字符串模板可以方便的实现字符串换行的连接、方便变量的使用等。
1.在WebStorm中新建一个文件，后缀名为ts。
在建立ts文件时，WebStorm会问你是否需要自动生成对应的js文件，并设置js文件保存的位置。如果采用Visual Studio 2017，会自动在ts文件相同的文件夹生成对应的js文件。
ts与自动生成的js文件的配置关系，IDE会自动生成一个tsconfig.json的文件进行描述，如下：
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"outDir": "jssrc/"
},
"exclude": [
"node_modules"
]
}
target指的是生成的js文件是满足es5还是es6规范；outDir指的是生成的js文件相对与ts文件的存放路径。
2.在ts中编码
在ts中，通过` `来说明其中的字符串应用字符串模板，可以在其中方便的实现原来在js中需要很麻烦实现的字符串换行，也能在其中方便的访问变量，代码如下：
var myname="caojian";
var getmyname=function () {
return "Get My Name";
}
console.log(`myname is ${myname}`);
console.log(`myname is ${getmyname()}`);
console.log(`<div>
<span>${myname}</span>
<span>${getmyname()}</span>
</div>`);
另外，还可以通过字符串模板的方式调用方法，实现字符串的拆分，代码如下：
function testfun(template,name,age){
console.log(template);
console.log(name);
console.log(age);
}
var myname="caojian";
var myage=function () {
return 37;
}
testfun`my name is ${myname} and my age is ${myage()} end`;
是不是感觉字符串处理的方式非常方便呢，另外大家可以查看对应的js生成的代码，比较下两种方式代码的复杂性。
欢迎进入QQ群讨论：573336726
