当前位置:首页 > 日记 > 正文

JavaScript字符串对象

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

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

相关文章

Word中进行实现页面横竖混排的操作

Word中进行实现页面横竖混排的操作

操作技巧,页面,操作步骤,电脑软件,Word,  Word文档中,一般情况下我们将所有页面均设置为横向或纵向。但有时也需要将其中的某些页面设置为其它页面方向不同,今天,小编就教大家在Word中进行实现页面横竖混排的操作技巧。Word中进行实现页面横…

微信小程序 弹窗自定义实例代码

微信小程序 弹窗自定义实例代码

实例代码,自定义,程序,电脑软件,微信小,微信小程序 弹窗首先wxml代码:<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view><view bindtap="clickArea">点击此处</view>  注:hidden属性用于切换比较频繁的地方。wxss代…

JS变量中有var定义和无var定义的区

JS变量中有var定义和无var定义的区

命令,义和,变量,中有,定义, 之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两者的区别...var x = 1;y = 4;console.log(x);//1console.log(y);//4console.log(win…

excel中合并计算的方法

excel中合并计算的方法

合并,方法,计算,电脑软件,excel,  Excel中的计算该如何合并计算呢?接下来是小编为大家带来的excel中合并计算的方法,供大家参考。excel中合并计算的方法:  合并计算步骤1:打开一张销售表,选中合并计算结果所放的位置。打开【数据】选项卡中…

jQuery+PHP+Mysql实现抽奖程序

jQuery+PHP+Mysql实现抽奖程序

抽奖,PHP+Mysql,程序,电脑软件,jQuery,抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的。本文将采用实例讲解如何利用jQuery+PHP+MySQL实现类似电视中常见的一个简单的抽奖程序。查看演示本例中的抽奖程序要实现从…

vue+vuex+axio从后台获取数据存入v

vue+vuex+axio从后台获取数据存入v

组件,获取数据,后台,共享数据,电脑软件,在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的…

关于vuex的学习实践笔记

关于vuex的学习实践笔记

学习,笔记,电脑软件,vuex,Vuex 简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。例如(travel store):import * as types from '../t…

如何设置PPT2007演示文稿中图例区

如何设置PPT2007演示文稿中图例区

位置,图例,设置,如何设置,演示文稿,  众所周知,PPT插入图表之后,默认的图例区都是在图表下方的,这让不习惯的人很不适应,那么怎么修改PPT图例区的位置呢?以下是小编为您带来的关于设置PPT2007图例区的位置,希望对您有所帮助。设置PPT2007图例…

Excel2007中批量删除文本和控件对

Excel2007中批量删除文本和控件对

对象,批量删除,控件,操作方法,操作步骤,  当工作表中有很多控件或者图片等对象时,一个一个去删除会非常的繁琐。案例阐述了如何一次性删除整个工作表中图形、控件和影音等对象,方便快捷。今天,小编就教大家在Excel2007中批量删除文本和控件…

Js利用Canvas实现压缩功能

Js利用Canvas实现压缩功能

压缩,功能,电脑软件,Js,Canvas,最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢。为此,需要对图片进行压缩处理来优化上传功能。以下是具体实现:/* * 图片压缩 * img 原始图片 * width 压…

excel 2007窗体录入教程excel 2007

excel 2007窗体录入教程excel 2007

教程,窗体,电脑软件,excel,strong,  在把数据录入到Excel中,有些时候需要打代码进行调整,可以更有效的提高工作效率。下面是由小编分享的excel 2007窗体录入教程,希望对你有用。excel 2007窗体录入教程excel 2007窗体录入教程1:单击Excel2007…

js判断PC端与移动端跳转

js判断PC端与移动端跳转

移动端,跳转,电脑软件,js,PC,在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现document.writeln(" 是否为移…