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 相关文章推荐
JS之小练习代码
Oct 12 Javascript
jQuery实现动画效果的实例代码
May 07 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
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
php4的session功能评述(三)
2006/10/09 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
微信小程序制作表格的方法
2019/02/14 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python中list列表的高级函数
2016/05/17 Python
python删除字符串中指定字符的方法
2018/08/13 Python
在python中pandas的series合并方法
2018/11/12 Python
python仿抖音表白神器
2019/04/08 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python flask中动态URL规则详解
2019/11/22 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
企业宣传口号
2014/06/12 职场文书
测绘工程专业求职信
2014/07/15 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
期末考试复习计划
2015/01/19 职场文书
校园广播稿范文
2015/08/19 职场文书
PHP判断是否是json字符串
2021/04/01 PHP