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 相关文章推荐
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
vue实现分页的三种效果
Jun 23 Javascript
详解vue v-model
Aug 31 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
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python将unicode和str互相转化的实现
2020/05/11 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python如何对齐字符串
2020/07/30 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
师范生自荐信
2013/10/27 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
商场主管竞聘书
2014/03/31 职场文书
读后感作文评语
2014/12/25 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL