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
时间: 2024-11-06 23:18:22