• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

02-TypeScript中新的字符串

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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": "js-s-rc/"
  },
  "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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript之环境搭建发布时间:2022-07-18
下一篇:
TypeScript类型映射发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap