JavaScript字符串对象


Posted in Javascript onJanuary 14, 2017

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返回类型

JavaScript字符串对象

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 Array扩展实现代码
Oct 14 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 #Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 #Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 #Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 #Javascript
Angular2 PrimeNG分页模块学习
Jan 14 #Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 #Javascript
详解jQuery事件
Jan 13 #Javascript
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
Python实现网站注册验证码生成类
2017/06/08 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Python random模块的使用示例
2020/10/10 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python中append函数用法讲解
2020/12/11 Python
给幼儿园老师的表扬信
2014/01/19 职场文书
社会公德演讲稿
2014/05/20 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014年科协工作总结
2014/12/09 职场文书
参观邀请函范文
2015/02/02 职场文书
合理化建议书
2015/02/04 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript