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下的动画处理总结
Oct 10 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
php查询操作实现投票功能
2016/05/09 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
详解React 条件渲染
2020/07/08 Javascript
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python map比for循环快在哪
2020/09/21 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
如何写好自荐信
2014/04/07 职场文书
植树造林的宣传标语
2014/06/23 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
初中重阳节活动总结
2015/05/05 职场文书
离婚案件原告代理词
2015/05/23 职场文书
工程款催款函
2015/06/24 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server