JavaScript字符串对象

更新时间：2017年01月14日 12:50:43 投稿：lijiao

这篇文章主要为大家详细介绍了JavaScript字符串对象，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JavaScript 对象是一种复合值,是有属性或已命名值的集合。通过”.”来引用属性值。当属性值是一个函数的时候,称其为方法。那么本篇文章来讲解讲解JavaScript中的String对象。

我们在书写js代码时,经常调用字符串的length属性,substring()方法,charAt(),indexOf()方法等。这里需要特别说明一点是js中字符串对象也是不可变的。通过+拼接字符串创建一个字符串对象,建议使用[].join()的方式拼接字符串。

看下面的例子:

var str="javascript";
var len=str.length;
var substr=str.substring(2,len);

那么一个问题来了,字符串不是对象为什么又属性呢？我们知道在js中使用”“或者”号包装起来的,我们都叫字符串。在字符串调用length属性或者其方法时, JavaScript就会隐士的将字符串的值通过调用new String(str)的方式转换为对象,这个对象继承了字符串的方法,并被用来处理属性的引用。一旦引用结束,这个新创建的对象就会被自动销毁。同字符串一样,数字和布尔类型也具有各自的方法,通过new Number()、new Boolen() 构造函数创建一个临时对象,这些方法的调用均是来自这个临时对象。null和undefined没有包装对象,访问它们的属性会造成一个类型错误。

现在来看一个模拟过程的例子：

    var str = "test";
    str.length = 10;
    str.testStrLen = 10;
    var res = str.length;
    console.log(res);//输出4
     res = str.testStrLen;
    console.log(res);//输出undefined

当js运行到这段代码的时候,res的值输出4、undefined。其中第二行代码尝试覆盖字符串原本的属性length,第三个增加一个属性testStrLen。从最终输出的结果来看,并未达到预期的结果。原因是第二行和第三行都分别创建了一个临时字符串对象,随后又销毁了这个临时对象。当进行取值是lenth获取的还是字符串里面的lenth属性,当尝试读取testStrLen的值,通过对应的原型链进行查找,没有找到,就返回一个undefined。通过测试这段代码说明了在读取字符串的时候,表现出来的结果像对象调用一样。但如果试图给其属性赋值,则会忽略这个操作,修改只是发生在临时对象上,然而这个临时对象并未继续保存下来。

存取字符串、数字、布尔类型值的属性时创建的临时对象称作包装对象,是偶尔用来区分字符串值和字符串对象、数字和数值对象以及布尔值和布尔对象。包装对象只是被看做是一种实现细节,而不用特别的关注。由于字符串、数字和布尔值的属性都是只读的,并且不能给他们定义新属性,因此有助于明白它们是有区别的。

需要注意的是,可通过String()、Number()、Boolean()构造函数来显示包装对象。

 var str = new String("test");
    str.length = 10;
    str.testStrLen = 10;
    var res = str.length;
    console.log(res);//输出4
    res = str.testStrLen;
    console.log(res); //输出10

通过上面代码我们成功给str这个字符串对象增加了testStrLen属性,但是并没有成功覆盖原来的length属性,也由此可以推出原型链读取时自身属性优先,找到就不进行下一步查找。而testStrLen的成功追加也可有助于我们理解通过字符串直接追加属性时创建了一个临时的字符串对象。

那我们来比较一下包装和不包装的值得的相等性。

 var str1 = new String("test");
    var str2 = "test";
    console.log(str1 == str2);//true
    console.log(str1 === str2);//false

    var n1 = new Number(1);
    var n2 = 1;
    console.log(n1 == n2);//true
    console.log(n1 === n2);//false

    var b1 = new Boolean(false);
    var b2 = false;

    console.log(b1 == b2);//true
    console.log(b1===b2);//false

由此我们可见JavaScript会在必要时将包装对象转换成原始值。“==”运算符将原始值和其包装对象视为相等。但是”===”全等运算符将它们视为不等。通过typeof运算符可以看到原始值和其包装对象的不同。
例如：

   var str1 = new String("test");
    var str2 = "test";
    console.log(str1 == str2);//true
    console.log(str1 === str2);//false
    console.log(typeof str1); //object
    console.log(typeof str2); //string

    var n1 = new Number(1);
    var n2 = 1;
    console.log(n1 == n2);//true
    console.log(n1 === n2);//false
    console.log(typeof n1); //object
    console.log(typeof n2); //number


    var b1 = new Boolean(false);
    var b2 = false;
    console.log(b1 == b2);//true
    console.log(b1 === b2);//false
    console.log(typeof b1); //object
    console.log(typeof b2); //boolean

常见的typeof返回类型

js数据类型参考

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript实现滚动加载更多
这篇文章主要为大家详细介绍了JavaScript实现滚动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
uni-app实现数据下拉刷新功能实例
很多列表页总数量很大,一次性查询加载会导致页面有很长时间的空白期,自然体验感极差,就会使用分页加载数据,这篇文章主要给大家介绍了关于uni-app实现数据下拉刷新功能实例的相关资料,需要的朋友可以参考下
2022-08-08
JS iFrame加载慢怎么解决
这篇文章主要介绍了JS iFrame加载慢的解决方法，非常实用，感兴趣的朋友一起学习吧
2016-05-05
根据一段代码浅谈Javascript闭包
水平不高，不能也不想从太深的层次去讲解这个东西，只是根据一段比较有代表性的代码，结合执行结果，从表象上粗浅地谈谈。
2010-12-12
浅析JS中回调函数及用法
这篇文章主要介绍了JS中回调函数及用法，通过实例代码给大家详细介绍了什么是回调函数，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-07-07
js中for...in循环对象时输出key值顺序混乱问题解决
很久之前就有前辈告诉我用for...in循环对象属性的顺序不是固定的,xiam 这篇文章主要给大家介绍了关于js中for...in循环对象时输出key值顺序混乱问题解决方法,需要的朋友可以参考下
2023-11-11
前端百度地图添加点并跳转到百度地图进行导航完整代码
web开发过程中经常碰到需要调用百度地图来视线定位导航的过程,许多技术博客上介绍的都是调用百度地图的api,这篇文章主要给大家介绍了关于前端百度地图添加点并跳转到百度地图进行导航的相关资料,需要的朋友可以参考下
2024-07-07
JS中的进制转换以及作用
这篇文章主要介绍了JS中的进制转换以及作用的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
JS与SQL方式随机生成高强度密码示例
这篇文章主要介绍了JS与SQL方式随机生成高强度密码,结合实例形式分析了javascript方式与SQL方式生成高强度密码的相关操作技巧,需要的朋友可以参考下
2018-12-12
Bootstrap基本组件学习笔记之input输入框组(9)
这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之input输入框组,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12

JavaScript字符串对象

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具