浅谈JavaScript中的string拥有方法的原因

引子

我们都知道，JavaScript数据类型分两大类，基本类型（或者称原始类型）和引用类型。

基本类型的值是保存在栈内存中的简单数据段，它们是按值访问的。JS中有五种基本类型：Undefined、Null、Boolean、Number和String。

引用类型的值是保存在堆内存中的对象，它的值是按引用访问的。引用类型主要有Object、Array、Function、RegExp、Date。

对象是拥有属性和方法的，所以我们看到下面这段代码一点也不奇怪.

var favs=['鸡蛋','莲蓬'];
favs.push('秋葵');
console.log(favs);//["鸡蛋", "莲蓬", "秋葵"]
console.log(favs.length);//3

Array是引用类型，所以它自然可以拥有属性(length)和方法(push)，这天经地义地就像夏天一定要吃冰淇淋一样。但是，再看下面的代码，仔细想想，这这这，合法吗？

var realMessage="Said I love you but I lied";
var myMessage=realMessage.substring(5,15);
console.log(myMessage); //"I love you"

有一个心碎的女纸任性地对一个用来分手的字符串任性地执行了“substring”方法，然后开心地看着剪辑版睡过去了。可是可是可是，不是说string是基本类型吗，为什么它可以拥有方法？？还有没有王法啊青天大老爷！

其实，这一切，都是因为有个叫“基本包装类型”的东东。这个基本包装类型特别耿直，是真正的“事了拂衣去，深藏功与名”！

基本包装类型

除了一开始提到的Object、Array等引用类型，JavaScript还为我们提供了三种特殊的引用类型：String、Number和Boolean，方便我们操作对应的基本类型。

继续看上面的剪辑字符串的例子，有没有注意到，尽管使用了substring方法，realMessage本身的值是不会变的，调用这个方法只是返回了一个新的字符串。

这就是基本包装类型的作用了。本来你是没有方法的，但是你想用方法的时候，你尽管调，对应的基本包装类型有这个方法就行。例如上面的substring方法，string这个基本类型是不可能有这个方法的，但是String这个包装类型有啊，它会吭吭哧哧地把这个方法执行完把结果返回。在执行到：

realMessage.substring(5,15)

这行代码时，发生了很多事。

首先，它会从内存中读取realMessage的值。当处于这种读取模式下的时候，后台就开始干活了。JS高程是这样描述后台完成的这些动作的：

1.创建String类型的一个实例；
2.在实例上调用指定的方法；
3.销毁这个实例

上面的例子可以用这样的代码来说明：

var _realMessage=new String("Said I love you but I lied");
var myMessage=_realMessage.substring(5,15);
_realMessgae=null; //方法调用后即销毁

所以，这样我们就明白了，并不是基本类型string执行了自身方法，而是后台为它创建了一个对应的基本包装类型String，它根据基本类型的值实例化出了一个实例，让这个实例去调用指定方法，最后销毁自己，感天动地有木有。

注意最后一步基本包装类型“会销毁”的特性，这决定了我们不能为基本类型值添加自定义属性和方法。

var me="sunjing";
me.age=18;
console.log(me.age);//undefined

我给“me“这个字符串添加了age属性，值设为美好的18岁，然并卵，再次访问时，这个属性已经渺无踪迹了。这是因为:

执行到第二行代码属性赋值时，后台创建了一个基本包装类型的实例，这个age属性确实挂到实例上去了，但是紧跟着，这个实例就被销毁了。执行到第三行时，又重新创建了新的基本包装类型的实例，自然是没有age属性的。

显示使用基本包装类型

除了在字符串处于读取模式下，后台会帮我们创建基本包装类型实例时，我们自己也可以显示地创建。

var str=new String("hello");
var str2=str.toUpperCase();
console.log(str2);//"HELLO:

这样与后台帮我们创建时变量中保存的东西是不同的。

var str1=new String("hello");
var str2="hello";
typeof str1 //"object"
typeof str2 //"string"

总结

多亏了有基本包装类型，我们操作string、boolean、number这三种基本类型更方便了。每当读取这三种基本类型值时，后台会创建对应的包装类型实例，这个实例会调用指定方法，调用完会被销毁。这种短暂的生命周期决定了我们不能为基本类型添加自定义的属性和方法。

我们再来看下javascript中String类的subString()方法和slice()方法

最近在看《Javascript高级程序设计》一书，在书中发现一些以前没有接触过的且比较实用的技巧和知识点，想通过博客记录一下，以加深记忆。

在该书2.8.4节中讲到String类中的subString()方法和slice()方法，其用法和返回结果都基本相同，如下示例：

var strObj = new String("hello world");
alert(strObj.slice(3));    　　// 输出结果："ol world"
alert(strObj.subString(3));  　　// 输出结果："ol world"
alert(strObj.slice(3, 7));    // 输出结果："lo w"
alert(strObj.subString(3,7));   // 输出结果："lo w"

由以上代码的输出结果可已看出，slice()方法和subString()方调用方法法和输出结果完全一样，这两种方法返回的都是要处理的字符串的子串，都接受一个或两个参数，第一个参数是要获取的子串的起始位置，第二个参数是要获取子串的终止位置，如果第二个参数省略终止位置就默认为字符串的长度，且两个方法都不改变String对象自身的值。

为什么有两个功能完全相同的方法呢？事实上，这两个方法并不完全相同，不过只在参数为负值时，他们处理参数的方式稍有不同。

对于负数参数，slice()方法会用字符串的长度加上参数，subString()方法将其作为0处理，例如：

var strObj = new String("hello world");
alert(strObj.slice(-3));　　　　　　// 输出结果："rld"
alert(strObj.subString(-3));　　　 // 输出结果："hello world"
alert(strObj.slice(3,-4));　　　　 // 输出结果："lo w"
alert(strObj.subString(3,-4))　　 // 输出结果："hel"

这样既可看到slice()和subString()方法的主要不同。当只有参数-3时，slice()返回"rld"，subString()则返回"hello world"。这是因为对于字符串"hello world"，slice(-3)将被转换成slice(8)，而subString(-3)则转化成subString(0)。同样，使用3和-4差别也是很明显。slice()方法将被转换成slice(3,7)，与前面的例子相同，返回"lo w"。而subString()方法则将这个两个参数解释为subString(0,3)，实际上是：subString(0,3)，因为subString()总是把较小的参数作为起始位，较大的数字最为终止位。

赞 (0)

相关推荐

  • javascript substr和substring用法比较

    substr函数和substring函数都是用来从某个"母字符串"中提取"子字符串"的函数.但用法有些差别,下面分别介绍 substr 方法 定义和用法 substr 方法用于返回一个从指定位置开始的指定长度的子字符串. 语法 stringObject.substr(start [, length ]) 参数 描述 start 必需.所需的子字符串的起始位置.字符串中的第一个字符的索引为 0. length 可选.在返回的子字符串中应包括的字符个数. 说明 如果st

  • Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍

    下面就来详细说一说 Javascript 中 Boolean.Nnumber.String 强制类型转换的区别. 我们知道 Boolean(value) 是把值转换成Boolean类型,Nnumber(value) 是把值转换成数字(整型或浮点数),而 String(value) 是把值转换成字符串. 先来分析下Boolean,Boolean在转换值为"至少有一字符的字符串"."非0的数字"或"对象"的情况下返回true:在转换值为"空

  • javascript从image转换为base64位编码的String

    最近需要把app的微信分享方法开放给webview,涉及到分享的图片,如果通过传送图片连接,那将要在后台再取一次图片文件,会影响速度,我选择webview把image以base64位编码的方式传给本地应用. 下面是实现的参考代码: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"&g

  • JavaScript中valueOf函数与toString方法深入理解

    JavaScript中valueOf函数方法是返回指定对象的原始值.使用方法: object.valueOf( )object是必选项参数是任意固有 JScript 对象. 每个JavaScript固有对象的 valueOf 方法定义不同. 对象 返回值 Array 数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起.其操作与 Array.toString 和 Array.join 方法相同. Boolean Boolean 值. Date 存储的时间是从 1970 年 1 月 1 日午

  • JavaScript中number转换成string介绍

    在JavaScript的值类型转换中,最常发生的就是string与number这两种类型值之间的相互转换. 可以通过调用number值的4个函数(事实上,是JS将number值自动转化为Number对象后,Number类的4个函数)来将其转换成string: 1.toString(). 2.toFixed(). 3.toExponential(). 4.toPrecision(). toString() 可以在number值上调用toString()方法来将其转换成字符串.toString()函

  • JavaScript中json对象和string对象之间相互转化

    json对象 复制代码 代码如下: var json = {aa:true,bb:true}; var json1 = {aa:'b',bb:{cc:true,dd:true}}; 1:js操作json对象 复制代码 代码如下: for(var item in json){ alert(item); //结果是 aa,bb, 类型是 string alert(typeof(item)); alert(eval("json."+item)); //结果是true,true类型是boole

  • Javascript将string类型转换int类型

    郁闷的事来了,先看前台HTML: 复制代码 代码如下: 购买数量: <input id="txtNum" type="text" value="1" runat="server" onchange="javascript:checkNum();" /> 件(库存<span id="getGoodsNum"> <%=GOODSNUM%></span

  • JavaScript截取字符串的Slice、Substring、Substr函数详解和比较

    在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一. 复制代码 代码如下: // slice // 语法: string.slice(start [, stop])"Good news, everyone!".slice(5,9); // 'news' // substring // 语法: string.substring(indexA [, indexB])"Good news, everyone!".s

  • JavaScript中使用Substring删除字符串最后一个字符

    String str = "a,b,c,"; 我们需要删除最后的英文逗点,该怎么办呢? 方法: 1.Substring str=str.Substring(0,s.Length-1)

  • 浅谈JavaScript中的string拥有方法的原因

    引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

  • 浅谈javascript中字符串String与数组Array

    简单点就是string是字符(串)... 而array是数组...可以放数字啊,字符啊等一系列东东!!! 上个示例: 复制代码 代码如下: var str = "liuzhanqi"; document.write(str["length"]);//等价str.l ength  var str = string.fromcharcode(72, 101, 108, 108, 111, 33); document.write(str); //各整数作为unicode编

  • 浅谈JavaScript中的String对象常用方法

    String对象提供的方法用于处理字符串及字符. 常用的一些方法: charAt(index):返回字符串中index处的字符. indexOf(searchValue,[fromIndex]):该方法在字符串中寻找第一次出现的searchValue.如果给定了fromIndex,则从字符串内该位置开始搜索,当searchValue找到后,返回该串第一个字符的位置. lastIndexOf(searchValue,[fromIndex]):从字符串的尾部向前搜索searchValue,并报告找到

  • 浅谈JavaScript中的Math.atan()方法的使用

    此方法返回弧度的反正切.atan方法返回一个在-pi/2和π/2弧度之间的数值. 语法 Math.atan( x ) ; 下面是参数的详细信息: x : 一个数字 返回值: 返回一个数弧度的反正切值 例子: <html> <head> <title>JavaScript Math atan() Method</title> </head> <body> <script type="text/javascript&quo

  • 浅谈JavaScript 中有关时间对象的方法

    ECMAScript中的Date类型是在早期 Java 中的 Java.unile.Date 类基础上构建的.为此 Date 类型使用自 UTC (Coordinated Universal Time, 国际协调时间)1970年1月1日午夜开始经过的毫秒数来保存日期. 在这种数据存储格式下, Date 类型保存的日期能够精确到1970年1月1日之前或之后的285616年 •Date.parse(string) 接受一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数,不能转换则返

  • 浅谈JavaScript中的对象及Promise对象的实现

    浅谈JavaScript中的对象及Promise对象的实现

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数.下面小编给大家收集整理些javascript中的对象及promise对象的实现.具体内容如下: 到处都是对象 window对象 常用的属性和方法介绍 location 包含页面的URL,如果改变这个属性,浏览器会访问新的URL status 包含将在浏览器状态去显示的一个串.一般在浏览器左下角 onload: 包含了需要在页面完全加载后调用的函数 document: 包含DOM alert方法: 显示一个提醒 prompt方法

  • 浅谈JavaScript中你可能不知道URL构造函数的属性

    URL URL 是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它, 在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点 例如,这里是这篇博客文章的路径: https://www.vipbic.com/thread.html?id=101 通常您需要访问 URL 的特定属性.这些可能是主机名(例如 vipbic

  • 浅谈JavaScript中等号、双等号、 三等号的区别

    一个等号是赋值操作,==先转换类型再比较,===先判断类型,如果不是同一类型直接为false. === 判断规则 如果类型不同,就[不相等]  如果两个都是数值,并且是同一个值,那么[相等]:(!例外)的是,如果其中至少一个是NaN,那么[不相等].(判断一个值是否是NaN,只能用isNaN()来判断)  如果两个都是字符串,每个位置的字符都一样,那么[相等]:否则[不相等].  如果两个值都是true,或者都是false,那么[相等].  如果两个值都引用同一个对象或函数,那么[相等]:否则[

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 浅谈Javascript中的函数、this以及原型

    关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

随机推荐