四、TypeScript字符串新特性

心已赠人 2022-05-15 02:22 241阅读 0赞

我们来学习TypeScript的语法和特性，首先从最简单的字符串开始

**TypeScript字符串第一个特性    多行字符串**

在传统的JavaScript里面我们写一个字符串换行，需要利用一个加号把它串起来，如果直接换行的话会报错。

var content = "aaa" + 
                          "bbb" +
                          "ccc";

这样写是比较麻烦的，读起来也不太好读；

所以在TypeScript里面引入了多行字符串的概念；  
多行字符串就是使用  \`  \` 去声明字符串，也就是键盘1左边的键

var content = `aaa
    bbb
    ccc`;

在这个字符串里面是可以随意换行的，它是不会报错的；编译成JavaScript的时候，它会加上自动换行

var content = "aaa\nbbb\nccc";

**字符串的第二个新特性 字符串模板**

所谓字符串模板，就是在多行字符串里面用一个表达式去插入变量或者以调用方法，如

var myname = "zhai liang";
    
    var getName = function （）{
         return "zhai liang";
    }
    
    console.log(`hello ${myname}`);
    console.log(`hello ${getName()}`);

表达式的语法就是$符合加上\{\}括起来的表达式的名字，这里不仅可以写表达式的名字，也可以写方法的调用

我们来看一下编译以后的JavaScript代码

![70][]

需要注意的是： 这个表达式的语法只有在\` \`里面才起作用,我们来写一段复制的字符串，比如说用字符串来拼接HTML

![70 1][]

**字符串的第三个特性 自动拆分字符串**

所谓自动拆分字符串是指,当你在利用一个字符串模板去调用一个方法的时候，这个字符串模板里面表达式的值,会自动赋给被调用的方法的参数

我们用字符串模板去调用这个test方法的时候，如果想使用字符串自动拆分的特性，你不用写圆括号了，直接写\`\`就可以了  
如：

![70 2][]

![70 3][]

[70]: /images/20220515/dc402cf213a04573acf70e956a3776cd.png
[70 1]: /images/20220515/03fa1df76b5f4883b885918f0acea33e.png
[70 2]: /images/20220515/6433f9d21caf48ca85427805b5663a21.png
[70 3]: /images/20220515/4851621271bc4e168da8a66aa0831e0f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读

相关 typescript学习笔记（一）--字符串、函数等新特性

一. 字符串新特性 1. 多行字符串我们在js中要连接多个字符串需要使用+，而在ts中可以直接使用\`\`即可，可自动转换成换行符 //ts

小灰灰/ 2023年07月20日 05:56/ 0 赞/ 71 阅读

相关 TypeScript 4.1 新特性：字符串模板类型，Vuex 终于有救了？

TypeScript 4.1 快要发布了，老爷子 Anders Hejlsberg\[1\] 加入了一项重大更新，「字符串模板类型」的支持。昨天看到这个更新的我特别兴奋，曾几

叁歲伎倆/ 2022年12月05日 04:52/ 0 赞/ 122 阅读

相关 TypeScript 4.1 新特性：字符串模板类型，Vuex 终于有救了？

TypeScript 4.1 快要发布了，老爷子 Anders Hejlsberg\[1\] 加入了一项重大更新，「字符串模板类型」的支持。昨天看到这个更新的我特别兴奋，曾几

浅浅的花香味﹌/ 2022年12月04日 06:25/ 0 赞/ 146 阅读

相关 typescript入门，typescript特性

typescript的介绍这里就不提，之前文章中有，目前typescript还不能直接运行在浏览器中，所以需要使用compiler进行编译成JavaScript文件进行

秒速五厘米/ 2022年06月11日 00:41/ 0 赞/ 272 阅读

相关五、TypeScript参数新特性

参数新特性一、TypeScript-参数类型 1、指定参数数据类型参数类型最重要的特性是在参数名称后面使用冒号来指定参数类型 ![70][] 这就是声明了一个

た入场券/ 2022年05月15日 02:34/ 0 赞/ 321 阅读

相关四、TypeScript字符串新特性

我们来学习TypeScript的语法和特性，首先从最简单的字符串开始 TypeScript字符串第一个特性多行字符串在传统的JavaScript里面我们写一个字符

心已赠人/ 2022年05月15日 02:22/ 0 赞/ 242 阅读

相关六、TypeScript-函数新特性

6-1：TypeScript-Rest and Spread操作符 Rest and Spread第一种用法下面我们来介绍一些Rest and Spread 操作符

╰半橙微兮°/ 2022年05月14日 06:39/ 0 赞/ 152 阅读

相关六、TypeScript函数新特性

1、rest和spread操作符声明任意数量的方法参数 //使用...args声明任意数量的参数 function test(...args) {

╰+哭是因爲堅強的太久メ/ 2022年05月09日 14:10/ 0 赞/ 183 阅读

相关五、TypeScript参数新特性

1、参数类型在参数名称后面使用冒号来声明参数类型 var myname: string = "yang pang zi"; var alia

淡淡的烟草味﹌/ 2022年05月09日 14:04/ 0 赞/ 134 阅读

相关四、TypeScript字符串新特性

1、多行字符串 var content = “aaabbbccc”; var content = `aaabbbccc`; 使用双撇号`

男娘i/ 2022年05月09日 14:03/ 0 赞/ 124 阅读