TypeScript里string和String的区别

 更新时间:2022年03月30日 15:21:56   作者:华为云开发者社区  
这篇文章主要介绍了TypeScript里string和String的区别,真的不止是大小写的区别,string表示原生类型,而String表示对象,下文更多详细内容需要的小伙伴可以参考一下

摘要:通常来说,string表示原生类型,而String表示对象。

背景

JavaScript语言不同的是,TypeScript使用的是静态类型,比如说它指定了变量可以保存的数据类型。如下图所示,如果在JS中,指定变量可以保存的数据类型,会报错:“类型注释只可以在TS文件中被使用”:

TypeScript是JavaScript的超集(superset),TypeScript需要编译(语法转换)生成JavaScript才能被浏览器执行,它也区分了string和String这两个数据类型。通常来说,string表示原生类型,而String表示对象。

1、原生string

JavaScript在ES6标准里支持6种原生类型(number),string是其中之一。

原生的string是不包含属性的值(即没有properties),包括字面上没有定义类型、字面上定义了string、字面上定义了String和一些从string函数调用返回的strings也都可以被归为原生类型:

以上三个变量的类型(typeof())是string

2、对象String

对象是不同属性的累积,一个对象可以调用许多相应的方法。

let msg3: String = new String('Hello world!');

这个变量msg3的类型就是object:

console.log(typeof(msg3)); // object

String对象支持的方法:

3、代码对比

我们对下面4个变量进行类型的探索与比较:

let msg: string = 'Hello world!';
let msg2: String = 'Hello world!';
let msg22 = 'Hello world!';  //字面上没有定义类型
let msg3: String = new String('Hello world!');

console.log(typeof(msg));  //string
console.log(typeof(msg2));  //string
console.log(typeof(msg22));  //string
console.log(typeof(msg3));  //object
console.log(msg === msg2);  //true
console.log(msg === msg3);  //false
console.log(msg2 === msg3);  //false

4、为什么需要String对象

首先,当我们使用关键字new新建一个String对象的时候,TS会创建一个新的对象;即我们用new新建了两个String对象,即使内容相同,它们也是指向不同的内存。

举下面两个栗子:

1.当用a1,b1代表相同值的两个变量的时候,它们是相同的;而当用new新建两个对象的时候,即使值相同,它们也是不同的(下图会输出false, true):

2.eval()函数的作用:用来计算表达式的值。如果我们把eval()直接赋给string,而string里面是计算式的字符串,那么它会返回计算后的值;而如果我们把eval()赋给String,因为它不是原生类型,它只会返回String这个对象(下图会输出27, :"8 + 20", 28):

其次,因为String对象可以有属性。我们可以用String对象在属性里保留一个额外的值。即使这个用法并不常见,但是仍然是TS的一个特性:

var prim = 'hello HW';
var obj = new String('hello HW Cloud');

prim.property = 'PaaS'; // Invalid
obj.property = 'PaaS';  // Valid
console.log(obj.property); //输出为PaaS

4、两者区别总结 

到此这篇关于TypeScript里string和String的区别的文章就介绍到这了,更多相关TypeScript里string和String内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript轻松控制表格列样式的脚本代码

    javascript轻松控制表格列样式的脚本代码

    javascript轻松控制表格列样式的脚本代码通过遍历table表格元素并动态设置其class属性,实现表格样式动态控制的功能,需要的朋友可以参考一下
    2007-12-12
  • JavaScript出现setTimeout倒计时误差的原因分析

    JavaScript出现setTimeout倒计时误差的原因分析

    setTimeout 倒计时误差的出现主要与 JavaScript 的事件循环机制和计时器的执行方式有关,本文就来和大家讲讲具体出现的原因以及解决方法,需要的可以参考一下
    2023-06-06
  • JavaScript常用正则函数用法示例

    JavaScript常用正则函数用法示例

    这篇文章主要介绍了JavaScript常用正则函数用法,结合实例形式分析了JavaScript正则函数match、exec、test、search、replace、split的功能与具体使用技巧,需要的朋友可以参考下
    2017-01-01
  • js实现双向链表互联网机顶盒实战应用实现

    js实现双向链表互联网机顶盒实战应用实现

    js实现双向链表互联网机顶盒实战应用实现,需要的朋友可以参考下。
    2011-10-10
  • es6函数之严格模式用法实例分析

    es6函数之严格模式用法实例分析

    这篇文章主要介绍了es6函数之严格模式用法,结合实例形式分析了es6函数严格模式的定义、用法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • JS数组的常用10种方法详解

    JS数组的常用10种方法详解

    这篇文章主要介绍了JS数组的常用10种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 详细聊聊TypeScript中unknown与any的区别

    详细聊聊TypeScript中unknown与any的区别

    unknown类型比较谦虚,就和他本身的意思一样,他从不祸害到其他的变量,但是any类型就是那种恶霸,属于什么都不管,谁也不敢管的类型,这篇文章主要给大家介绍了关于TypeScript中unknown与any区别的相关资料,需要的朋友可以参考下
    2021-10-10
  • js判断鼠标同时离开两个div的思路及代码

    js判断鼠标同时离开两个div的思路及代码

    js判断鼠标同时离开两个div想了好长时间终于出炉了,下面与大家分享下具体的实现代码,感兴趣的朋友可以参考下啊
    2013-05-05
  • Electron 打包问题:electron-builder 下载各种依赖出错(推荐)

    Electron 打包问题:electron-builder 下载各种依赖出错(推荐)

    这篇文章主要介绍了Electron 打包问题:electron-builder 下载各种依赖出错,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • javascript中的Base64、UTF8编码与解码详解

    javascript中的Base64、UTF8编码与解码详解

    本文给大家介绍的是javascript中的Base64、UTF8编码与解码的函数源码分享以及使用范例,十分实用,推荐给小伙伴们,希望大家能够喜欢。
    2015-03-03

最新评论