JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】


Posted in Javascript onAugust 09, 2018

本文实例讲述了JavaScript引用类型之基本包装类型。分享给大家供大家参考,具体如下:

为了操作基本类型值,ECDMAScript提供了3个特殊的引用类型——基本包装类型BooleanNumberString。每当读取一个基本类型值时,后台会创建一个对应的基本包装类型的对象。

var str = "Hello world";
var substr = str.substring();

等价于

var str = new String("Hello world");//创建String类型的实例
var substr = str.substring();//在实例上调用substring()方法
str = null;//销毁实例

基本包装类型是特殊的引用类型,引用类型与基本包装类型的区别如下:

(1)对象的生存期

使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前一直存在于内存中,而自动创建的基本包装类型的对象,只存在于代码执行瞬间,然后立即被销毁,也就是说,不能在运行时为基本包装类型添加属性和方法。

var str1 = "Hello world";
var str2 = new String("Hello World");
str1.life = 20;
str2.life = 20;
alert(str1.life);//undefined
alert(str2.life);//20

(2)instanceof操作符测试结果

使用instanceof操作符测试基本包装类型实例会返回true,测试基本类型值会返回false。

var str1 = "Hello World";
var str2 = new String("Hello world");
alert(str1 instanceof String);//false
alert(str2 instanceof String);//true

可以显式地调用Boolean、Number、String来创建基本包装类型的对象,但尽可能不要这样做,因为这样不易区分是在处理基本类型还是引用类型。

Object构造函数会根据传入值的类型返回相应基本包装类型的实例。

var str = new String("Hello world");
alert(str instanceof String);//true
var num = new Number(16);
alert(num instanceof Number);//true
var bool = new Boolean(true);
alert(bool instanceof Boolean);//true

对基本包装类型的实例调用typeOf()方法会返回"Object",实例变量中保存的是基本类型值。

var str = new String("Hello world");
alert(typeof str);//object
var num = new Number(16);
alert(typeof num);//object
var boolean = new Boolean(true);
alert(typeof boolean);//object

使用new操作符调用基本包装类型的构造函数,与直接调用同名的转型函数是不同的,变量中保存的是基本包装类型的实例。

var str = String("Hello world");
alert(typeof str);//string
var num = Number(16);
alert(typeof num);//number
var bool = Boolean(true);
alert(typeof bool);//boolean

所有基本包装类型的对象在转换为布尔类型时值都是true。

var boolean1 = new Boolean(false);
alert(boolean1);//false
alert(boolean1 && true);//true
var boolean2 = new Boolean(0);
alert(boolean2);//false
alert(boolean2 && true);//true
var boolean3 = new Boolean("");
alert(boolean3);//false
alert(boolean3 && true);//true

1、Boolean类型

var boolean = new Boolean(true);

Boolean类型的实例重写了valueOf()方法,返回对应的基本类型值true和false;重写了toString()方法,返回字符串"true"和"false"。

2、Number类型

var num = new Number(16);

Number类型也重写了继承的valueOf()toString()toLocaleString()方法,重写后的valueOf()方法返回对应的基本类型值,另外两个方法返回对应的字符串。可以为toString()方法传递一个表示基数的参数。

除了继承的方法外,Number还提供了将数值格式化为字符串的方法:

(1)toFixed()方法:传入的参数为小数位数,返回数值的字符串表示。

(2)toExponential()方法:传入的参数为小数位数,返回以指数表示法表示的数值的字符串形式。

(3)toPrecision()方法:传入的参数为数值的所有数组位数,不包含指数部分,返回指定格式的字符串表示。

3、String类型

var str = new String("Hello world");

String类型继承的valueOf()toString()toLocaleString()方法返回对象所表示的字符串值。

(1)String类型实例的属性。

length属性:表示字符串包含的字符个数。

(2)String类型实例的方法。

---字符方法

不会修改字符串本身的值,只是返回子字符串,对原始字符串没有影响。

1)charAt()方法:传入的参数为基于0的字符位置,返回给定位置的字符。

2)charCodeAt()方法:传入的参数为基于0的字符位置,返回给定位置的字符编码。

---字符串操作方法

1)concat()方法:传入的参数为任意多个字符串,返回拼接得到的字符串。

2)substr()slice()substring()方法:三个基于子字符串创建新字符串的方法,传入一或两个参数,返回子字符串。第一个参数指定子字符串的开始位置,第二个参数可选,slice()substring()的第二个参数指定子字符串的结束位置,substr()的第二个参数指定子字符串的长度。当传入的参数是负数时,slice()方法会将负值与字符串长度相加,substr()方法将第一个负值加上字符串长度,而第二个负值转换为0,substring()方法将所有负值都转换为0。

---字符串位置方法

搜索给定的子字符串,返回子字符串的位置,未搜索到则返回-1。第一个参数指定搜索的子字符串,第二个参数可选,指定搜索开始的位置。---

1)indexOf()方法:从头开始向后搜索。

2)lastIndexOf()方法:从后开始向前搜索。

---trim()方法

创建一个字符串的副本,删除前缀和后缀的空格,返回新字符串,原始字符串不变。

---字符串大小写转换方法

1)toLowerCase()方法:通用的小写转换方法。

2)toUpperCase()方法:通用的大写转换方法。

3)toLocaleLowerCase()方法:针对特定地区的小写转换方法。

4)toLocaleUpperCase()方法:针对特定地区的大写转换方法。

---字符串模式匹配方法

1)match()方法:在字符串上调用match()方法,与在RegExp实例上调用exec()方法相同。接收1个参数——正则表达式或RegExp对象。返回一个数组,数组的第一项是与整个模式匹配的字符串,之后的每一项是与各个子模式匹配的字符串。

2)search()方法:从头开始向后查找。接收1个参数——正则表达式或RegExp对象。返回第一个匹配项的索引,未找到匹配结果则返回-1。

3)replace()方法:替换字符串。接收2个参数——第一个参数是一个正则表达式或RegExp对象或字符串(字符串不会被转换为正则表达式),第二个参数是一个字符串或函数。若第一个参数是字符串,则只会替换第一个子字符串,若想替换所以子字符串,需要使用带有g标志的RegExp对象。

a、第二个参数为字符串时,使用特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中。

特殊的字符序列 替换文本
$$ $
$& 匹配整个模式的子字符串
$' 匹配的子字符串之前的子字符串
$` 匹配的子字符串之后的子字符串
$n 匹配第n个子模式的子字符串,n等于0-9.若正则表达式中没有定义子模式,则使用空字符串
$nn 匹配第nn个子模式的子字符串,nn等于01-99.若正则表达式中没有定义子模式,则使用空字符串
var str = "cat, fat, eat";
var result = str.replace(/(.at)/g, "my($1)");
alert(result);//my(cat), my(fat), my(eat)

b、第二个参数为函数时,可以实现更为精细的替换操作。

在只有一个匹配项(即与模式匹配的字符串)时,向函数传递3个参数——模式的匹配性、模式匹配项在字符串中的位置和原始字符串。在正则表达式中定义了多个子模式的情况下,向函数传递的参数依次是模式的匹配项、第一个子模式的匹配项、第二个子模式的匹配项、......、模式匹配项在字符串中的位置和原始字符串。返回替换文本。

var str = "<a href = \"test.jsp\">link</a>";
var result = str.replace(/[<>"&]/g, function(match, positon, originalStr) {
  switch(match) {
    case "<":
      return "<";
    case ">":
      return ">";
    case "&":
      return "&";
    case "\"":
      return """;
  }
});
alert(result);//<a href = "test.jsp">link</a>

4)split()方法:第一个参数为分隔符(字符串或RegExp对象,字符串不会被转换为正则表达式),第二个参数可选,指定返回的字符串数组的大小。返回分割后的字符串数组。

var strs1 = str.split("|", 2);//["cat","fat","eat"]
var str = "cat|fat|eat";
var strs1 = str.split("|");
alert(strs1);//cat,fat,eat
var strs2 = str.split("|", 2);
alert(strs2);//cat,fat
var strs3 = str.split(/[^\|]+/);
alert(strs3);//,|,|,

strs3的分隔符为“cat”、"fat"、“eat”,因此返回的数组第一项和最后一项时空字符串。

---localeCompare()方法:

比较两个字符串,若字符串在字母表中应该排列在字符串参数之前,返回一个负数(大多数情况是-1),若在之后,返回一个正数(大多数情况是1),若相等,返回0。

alert("world".localeCompare("hello"));//1

---fromCharCode()方法:

String类的静态方法,接收一或多个字符编码,转换为字符串,与charCodeAt()是相反的操作。

alert(String.fromCharCode(104, 101, 108, 108, 111));//"hello"

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 #Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 #Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 #Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 #Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 #Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
You might like
php多维数组去掉重复值示例分享
2014/03/02 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
在JavaScript中访问字符串的子串
2015/07/07 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
2014端午节活动策划方案
2014/01/27 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
高中校园广播稿
2014/10/21 职场文书
公司股东出资证明书
2014/11/01 职场文书
导游词格式
2015/02/13 职场文书
培训简讯范文
2015/07/20 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis