JavaScript-基本包装类型

其他 2018-05-07 09:27:58 阅读次数: 3

JavaScript-基本包装类型

一、基本概念

       为了便于操作基本类型值，ECMAScript提供了3个特殊的引用类型：Boolean、Number和String。这些类型与其他引用类型相似，同时也具有与各自的基本类型相应的特殊行为。实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基本包装类型举例</title>
</head>
<body>
    <script type="text/javascript">
        var a = 'pangtong';
        alert(a);                //pangtong
        alert(typeof a);         //string
        alert(a.substring(4));   //tong    索引0开始，从第2个位置开始截取到末尾的字符串输出
        alert(a.indexOf('g'));   //3
    </script>
</body>
</html>

分析：
对象.方法(参数)，这种写法是引用类型的写法。
基本包装类型是基本类型，但又是特殊的引用类型，可以调用系统内置的方法。

二、两种写法

【1】字面量写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基本包装类型字面量写法</title>
</head>
<body>
    <script type="text/javascript">
        //字面量写法
        var student = 'pangtong';
        student.name = 'tong';
        student.age = function (){
            return 18;
        };
        alert(student);                 //pangtong
        alert(typeof student);          //string
        alert(student.substring(4));    //tong
        alert(student.name);            //undefined
        alert(student.age());           //报错
    </script>
</body>
</html>

【2】new运算符写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基本包装类型new运算符写法</title>
</head>
<body>
    <script type="text/javascript">
        //new运算符写法
        var student = new String('pangtong');
        student.name = 'tong';
        student.age = function (){
            return 18;
        };
        alert(student);                 //pangtong
        alert(typeof student);          //object
        alert(student.substring(4));    //tong
        alert(student.name);            //tong
        alert(student.age());           //18
    </script>
</body>
</html>

【3】两种写法区别和联系

       基本类型无法给自己创建自定义的属性和方法，但可以调用系统内置的属性和方法。但是new运算符形式可以创建自定义的属性和方法，也可以调用系统内置的属性和方法。
       不管字面量形式还是new运算符形式，都可以调用系统的内置方法。并且Boolean和Number特性与String相同，三种类型可以成为基本包装类型。
       在使用new运算符创建Boolean、Number、String三种类型的对象时，可以给自己添加属性和方法，但建议不要这样使用，这样会导致根本分不清到底是基本类型值还是引用类型值。

三、Boolean类型

Boolean类型没有特定的属性或者方法。

四、Number类型

Number类型有一些静态属性(直接通过Number调用的属性，而无须new运算符)和方法。

1）Number静态属性

【1】MAX_VALUE表示最大数
【2】MIN_VALUE表示最小值
【3】NaN非数值
【4】NEGATIVE_INFINITY负无穷大，溢出返回该值
【5】POSITIVE_INFINITY无穷大，溢出返回该值
【6】prototype原型，用于增加新属性和方法
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Number静态属性</title>
</head>
<body>
    <script type="text/javascript">
        //Number静态属性
        var a = 500;
        alert(a.MAX_VALUE);       //这种写法叫做属性
        alert(Number.MAX_VALUE);  //这种写法（类型.属性）叫做静态属性
    </script>
</body>
</html>

2）Number静态方法

【1】toString() 将数值转化为字符串，并且可以转换进制
【2】toLocaleString()根据本地数字格式转换为字符串
【3】toFixed()将数字保留小数点后指定位数并转化为字符串
【4】toExponential()将数字以指数形式表示，保留小数点后指定位数并转化为字符串
【5】toPrecision()指数形式或点形式表述数，保留小数点后面指定位数并转化为字符串
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Number静态方法</title>
</head>
<body>
    <script type="text/javascript">
        //Number静态方法

        //toString()
        var a = 1500;
        var b = 1500.678679;
        alert(a);                          //1500
        alert(typeof a);                   //number
        alert(a.toString());               //1500
        alert(typeof a.toString());        //string

        //toLocaleString()
        alert(a.toLocaleString());         //1,500
        alert(typeof a.toLocaleString());  //string

        //toFixed();
        alert(b);                            //1500.678679
        alert(typeof b);                     //number
        alert(b.toFixed(3));                 //1500.679
        alert(typeof b.toFixed(3));          //string
    </script>
</body>
</html>

五、String类型

String类型包含了三个属性和大量的可用内置方法。

1）String对象属性

【1】length返回字符串的字符长度
【2】constructor返回创建String对象的函数
【3】prototype通过添加属性和方法扩展字符串定义
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型三个属性</title>
</head>
<body>
    <script type="text/javascript">
        var a = 'pangtong';
        alert(a.length);        //8
        alert(a.constructor);   //function String(){}
    </script>
</body>
</html>

2）String对象方法

String也包含对象的通用方法，比如valueOf()、toLocaleString()和toString()方法，但这些方法都返回字符串的基本值。

【一】字符方法

【1】charAt(n) 返回指定索引位置的字符
【2】charCodeAt(n)以Unicode编码形式返回指定索引位置的字符
【补充】还可以通过数组方式获取，a[1]在IE浏览器会显示undefined，所以使用时要慎重。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        var a = 'pangtong';
        alert(a.charAt(2));         //n，索引从0开始
        alert(a.charCodeAt(1));     //97，索引从0开始
        alert(a[1]);                //a
    </script>
</body>
</html>

【二】字符方法

【1】concat(str1…str2)将字符串参数串联到调用该方法的字符串
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        var a = 'pangtong';
        //concat()方法
        alert(a.concat('  is ',' a ',' girl ','!'));   //pangtong is a girl!
    </script>
</body>
</html>
【2】slice(n,m)返回字符串n到m之间位置的字符串

*包括n不包括m。
*索引从0开始。
*如果只有一个参数，返回从这个参数开始向后全部字符。
*       如果只有一个负数参数，则先获取字符串的长度，然后用字符串长度加上负值，得到的数就是开始截取的位置。比如说，
var a = ‘pangtong’;alert(a.slice(-2)); ，打印的结果是ng，字符串的长度是8，8+（-2）=6，从所因为6的位置开始截取到最后。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        var a = 'pangtong';
        //slice(n,m)方法
        alert(a.slice(0,3));   //pan
        alert(a.slice(4));     //tong
        alert(a.slice(-2));    //ng
        alert(a.slice(4,-2));  //to
        alert(a.slice(-2,-1)); //n
    </script>
</body>
</html>
【3】substring(n,m)同上

*正数参数的用法和slice相同
*如果只有一个负数参数，则返回整个字符串
*       如果两个参数一正一负，参数为负直接转0，并且方法会把较小的数字提前，比如说，
var a = ‘pangtong’;alert(a.substring(3,-3)); 打印结果是pan，第二个参数是负数，所以直接变成（3，0），把小的提前（0，3）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        var a = 'pangtong';
        //substring(n,m)方法
        alert(a.substring(0,3));   //pan
        alert(a.substring(4));     //tong
        alert(a.substring(-3));    //pangtong
        alert(a.substring(3,-3));  //pan
        alert(a.substring(-6,-3)); //空
    </script>
</body>
</html>
【4】substr(n,m)返回字符串n开始的m个字符串

*IE的JavaScript实现在处理substr()方法传递负值的情况下存在问题，它会返回原始字符串，在IE8以下会返回原始全部字符串。
*如果第二个参数是负值，则直接变为0，返回空
*如果第一个参数是负值，则索引为-2的就是原来索引为2的位置
若只有一个参数，则截取从该位置一直到结尾的字符串

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        var a = 'pangtong';
        alert(a.substr(4));    //tong
        alert(a.substr(2,4));  //ngto
        alert(a.substr(-3));   //ong   在IE8以下会返回原始全部字符串pangtong
        alert(a.substr(2,-2)); //空    如果第二个参数是负值，则直接变为0，返回空
        alert(a.substr(-2,2)); //ng    如果第一个参数是负值，则索引为-2的就是原来索引为2的位置
    </script>
</body>
</html>

【三】字符串位置方法

【1】indexOf(str, n)

从指定的位置开始向后搜索第一个字符出现的位置，由左向右的顺序，并将搜索的索引值返回

【2】lastIndexOf(str, n)

从指定的位置开始向前搜索第一个字符出现的位置，由右向左的顺序，并将搜索的索引值返回

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        var a = 'pangtong';
        alert(a.indexOf());              //-1 如果没有找到想要的字符串，则返回-1。
        alert(a.indexOf('g'));           //3  从最初的位置开始向后搜索第一个字符出现的位置，由左向右的顺序
        alert(a.indexOf('n',2));         //2  从指定的位置开始向后搜索第一个字符出现的位置，由左向右的顺序
        alert(a.lastIndexOf('g'));       //7  从最后开始向前搜索第一个字符出现的位置，由右向左的顺序
        alert(a.lastIndexOf('n',7));     //6  从指定的位置开始向前搜索第一个字符出现的位置，由右向左的顺序
    </script>
</body>
</html>
【3】练习题
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        //练习题
        //题目：如果在下面字符串中找到所有'n'出现的位置
        var s = 'pangtong';
        //第一步：写一个存放'n'的空数组
        var as = [];
        //第二步：获取第一个'a'的位置
        var pos = s.indexOf('n');
        //第三步：循环，如果pos大于-1，说明还存在a
        while(pos > -1){
            //第四步：将找到的a的位置添加进数组
            as.push(pos);
            //第五步：将位置指针指向下一个相邻位置，继续寻找
            pos = s.indexOf('n',pos+1);
        }
        //最后一步：输出
        alert(as);   //2,6
    </script>
</body>
</html>

【四】大小写转换方法

【1】toLowerCase(str)将字符串全部转换为小写
【2】toUpperCase(str)将字符串全部转换为大写
【3】toLocaleLowerCase(str)将字符串全部转换为小写，并且本地化
【4】toLocaleupperCase(str)将字符串全部转换为大写，并且本地化

只有几种语言（如土耳其语）具有地方特有的大小写本地性，一般来说，是否本地化效果都是一致的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        //大小写转换
        var str = 'Pangtong';
        alert(str.toLowerCase());
        alert(str.toUpperCase());
        alert(str.toLocaleLowerCase());
        alert(str.toLocaleUpperCase());
        //只有几种语言（如土耳其语）具有地方特有的大小写本地性，一般来说，是否本地化效果都是一致的。
    </script>
</body>
</html>

【五】字符串的模式匹配方法

【1】match(pattern) 返回pattern中的子串，找不到返回null
【2】replace(pattern, replacement) 用replacement 替换pattern
【3】search(pattern) 返回字符串中pattern开始位置（返回找到的字符串的indexOf的值）
【4】split(pattern) 返回字符串按指定pattern 拆分的数组

match()、replace()、serach()、split()在普通字符串中也可以使用。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        var s = 'pangtong';
        alert(s.match('t'));        //t
        alert(s.match('b'));        //null
        alert(s.replace('t','T'));  //pangTong
        alert(s.search('t'));       //4
        alert(s.split('t'));        //pang,ong
    </script>
</body>
</html>

【六】其他方法（不常用，了解就行）

【1】fromCharCode(ascii)静态方法，输出Ascii码对应值
【2】localeCompare(str1,str2)比较两个字符串，并返回相应的值
  • localeCompare(str1,str2)：比较两个字符串并返回以下值中的一个：
  • *如果字符串在字母表中应该排在字符串参数之前，则返回一个负数。(多数-1)
  • *如果字符串等于字符串参数，则返回0。
  • 如果字符串在字母表中应该排在字符串参数之后，则返回一个正数。(多数1)
【3】link(URL)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>String类型方法</title>
</head>
<body>
    <script type="text/javascript">
        var s = 'pangtong';
        alert(s.link('www.baidu.com'));   //<a href="www.baidu.com">pangtong</a>
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/sinat_38328891/article/details/79899076
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022