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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
JavaScript继承方式实例
Oct 29 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
世界上第一台立体声收音机
2021/03/01 无线电
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
清空上传控件input file的值
2010/07/03 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python实现rest请求api示例
2014/04/22 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
公司JAVA开发面试题
2015/04/02 面试题
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
高中运动会广播稿
2015/08/19 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书