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 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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.MVC的模板标签系统(四)
2006/09/05 PHP
分享PHP守护进程类
2015/12/30 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php5与php7的区别点总结
2019/10/11 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python实现红包裂变算法
2016/02/16 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python collections模块的使用
2020/10/16 Python
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
环保标语大全
2014/06/12 职场文书
民主评议党员个人总结
2015/02/13 职场文书
个人工作保证书
2015/02/28 职场文书
就业推荐表院系意见
2015/06/05 职场文书
董事长年会致辞
2015/07/29 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers