JavaScript05-对象03
一、包装类
基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object
在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象
String() 可以将基本数据类型字符串转换为String对象
Number() 可以将基本数据类型的数字转换为Number对象
Boolean() 可以将基本数据类型的布尔值转换为Boolean对象
但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的
结果
方法和属性之能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法，用完以
后，在将其转换为基本数据类型
开发的时候基本不用，包装类的主要作用是方便浏览器内部进行转换，比如进行基本数据类型调用toString方法时浏览器会自动将基本数
据类型转换为包装类，通过包装类去调用toString方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个Number类型的对象
//num = 3;
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = true;
//向num中添加一个属性
num.hello = "abcdefg";
//console.log(str === str2);
var b = new Boolean(false);
/*if(b){
alert("我运行了~~~");
}*/
/*
* 方法和属性之能添加给对象，不能添加给基本数据类型
* 当我们对一些基本数据类型的值去调用属性和方法时，
* 浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法
* 调用完以后，在将其转换为基本数据类型
*/
var s = 123;
s = s.toString();
s.hello = "你好";
console.log(s.hello);
//console.log(typeof s);
</script>
</head>
<body>
</body>
</html>
二、字符串的方法
在底层字符串是以字符数组的形式保存的
常用方法与属性：
length属性
| Method | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将指定的 Unicode 值转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个字符串
var str = "Hello Atguigu";
/*
* 在底层字符串是以字符数组的形式保存的
* ["H","e","l"]
*/
/*
* length属性
* - 可以用来获取字符串的长度
*/
//console.log(str.length);
//console.log(str[5]);
/*
* charAt()
* - 可以返回字符串中指定位置的字符
* - 根据索引获取指定的字符
*/
str = "中Hello Atguigu";
var result = str.charAt(6);
/*
* charCodeAt()
* - 获取指定位置字符的字符编码（Unicode编码）
*/
result = str.charCodeAt(0);
/*
* String.fromCharCode()
* - 可以根据字符编码去获取字符
*/
result = String.fromCharCode(0x2692);
/*
* concat()
* - 可以用来连接两个或多个字符串
* - 作用和+一样
*/
result = str.concat("你好","再见");
/*
* indexof()
* - 该方法可以检索一个字符串中是否含有指定内容
* - 如果字符串中含有该内容，则会返回其第一次出现的索引
* 如果没有找到指定的内容，则返回-1
* - 可以指定一个第二个参数，指定开始查找的位置
*
* lastIndexOf();
* - 该方法的用法和indexOf()一样，
* 不同的是indexOf是从前往后找，
* 而lastIndexOf是从后往前找
* - 也可以指定开始查找的位置
*/
str = "hello hatguigu";
result = str.indexOf("h",1);
result = str.lastIndexOf("h",5);
/*
* slice()
* - 可以从字符串中截取指定的内容
* - 不会影响原字符串，而是将截取到内容返回
* - 参数：
* 第一个，开始位置的索引（包括开始位置）
* 第二个，结束位置的索引（不包括结束位置）
* - 如果省略第二个参数，则会截取到后边所有的
* - 也可以传递一个负数作为参数，负数的话将会从后边计算
*/
str = "abcdefghijk";
result = str.slice(1,4);
result = str.slice(1,-1);
/*
* substring()
* - 可以用来截取一个字符串，可以slice()类似
* - 参数：
* - 第一个：开始截取位置的索引（包括开始位置）
* - 第二个：结束位置的索引（不包括结束位置）
* - 不同的是这个方法不能接受负值作为参数，
* 如果传递了一个负值，则默认使用0
* - 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
*/
result = str.substring(0,1);
/*
* substr()
* - 用来截取字符串
* - 参数：
* 1.截取开始位置的索引
* 2.截取的长度
*/
str = "abcdefg";
result = str.substr(3,2);
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 参数：
* -需要一个字符串作为参数，将会根据该字符串去拆分数组
*/
str = "abcbcdefghij";
result = str.split("d");
/*
* 如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
*/
result = str.split("");
//console.log(Array.isArray(result));
//console.log(result[0]);
console.log(result);
str = "abcdefg";
/*
* toUpperCase()
* - 将一个字符串转换为大写并返回
*/
result = str.toUpperCase();
str = "ABCDEFG";
/*
* toLowerCase()
* -将一个字符串转换为小写并返回
*/
result = str.toLowerCase();
//console.log(result);
</script>
</head>
<body>
</body>
</html>
三、正则表达式
正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容
提取出来
3.1 创建正则表达式的对象
语法：
var 变量 = new RegExp("正则表达式","匹配模式");
使用typeof检查正则对象，会返回object
var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
在构造函数中可以传递一个匹配模式作为第二个参数，可以是 i 忽略大小写 g 全局匹配模式
正则表达式的方法：
test()
使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建正则表达式的对象
/*
* 语法：
* var 变量 = new RegExp("正则表达式","匹配模式");
* 使用typeof检查正则对象，会返回object
* var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
* 在构造函数中可以传递一个匹配模式作为第二个参数，
* 可以是
* i 忽略大小写
* g 全局匹配模式
*/
var reg = new RegExp("ab","i");
var str = "a";
/*
* 正则表达式的方法：
* test()
* - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
* 如果符合则返回true，否则返回false
*/
var result = reg.test(str);
//console.log(result);
console.log(reg.test("Ac"));
</script>
</head>
<body>
</body>
</html>
使用字面量来创建正则表达式
语法：var 变量 = /正则表达式/匹配模式
使用字面量的方式创建更加简单，使用构造函数创建更加灵活
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 使用字面量来创建正则表达式
* 语法：var 变量 = /正则表达式/匹配模式
* 使用字面量的方式创建更加简单
* 使用构造函数创建更加灵活
*
*/
//var reg = new RegExp("a","i");
var reg = /a/i;
//console.log(typeof reg);
//console.log(reg.test("abc"));
</script>
</head>
<body>
</body>
</html>
3.2 正则语法
正则表达式模式
修饰符
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的选项。 |
元字符（Metacharacter）是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找单词字符。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NUL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八进制数 xxx 规定的字符。 |
| \xdd | 查找以十六进制数 dd 规定的字符。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var reg = /a/i;
//创建一个正则表达式，检查一个字符串中是否有a或b
/*
* 使用 | 表示或者的意思
*/
reg = /a|b|c/;
/*
* 创建一个正则表达式检查一个字符串中是否有字母
*/
//reg = /a|b|c|d|e|f|g/;
/*
* []里的内容也是或的关系
* [ab] == a|b
* [a-z] 任意小写字母
* [A-Z] 任意大写字母
* [A-z] 任意字母
* [0-9] 任意数字
*/
reg = /[A-z]/;
//检查一个字符串中是否含有 abc 或 adc 或 aec
reg = /a[bde]c/;
/*
* [^ ] 除了
*/
reg = /[^ab]/;
reg = /[^0-9]/;
console.log(reg.test("12a3456"));
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个正则表达式检查一个字符串中是否含有aaa
*/
/*
* 量词
* - 通过量词可以设置一个内容出现的次数
* - 量词只对它前边的一个内容起作用
* - {n} 正好出现n次
* - {m,n} 出现m-n次
* - {m,} m次以上
* - + 至少一个，相当于{1,}
* - * 0个或多个，相当于{0,}
* - ? 0个或1个，相当于{0,1}
*/
var reg = /a{3}/;
//ababab
reg = /(ab){3}/;
reg = /b{3}/;
reg = /ab{1,3}c/;
reg = /ab{3,}c/;
reg = /ab+c/;
reg = /ab*c/;
reg = /ab?c/;
//console.log(reg.test("abbc"));
/*
* 检查一个字符串中是否以a开头
* ^ 表示开头
* $ 表示结尾
*/
reg = /^a/; //匹配开头的a
reg = /a$/; //匹配结尾的a
//console.log(reg.test("abcabca"));
/*
* 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
*/
reg = /^a$/;
//console.log(reg.test("bbca"));
/*
* 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
*
* 手机号的规则：
* 1 3 567890123 （11位）
*
* 1. 以1开头
* 2. 第二位3-9任意数字
* 3. 三位以后任意数字9个
*
* ^1 [3-9] [0-9]{9}$
*
*/
var phoneStr = "13067890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 检查一个字符串中是否含有 .
* . 表示任意字符
* 在正则表达式中使用\作为转义字符
* \. 来表示.
* \\ 表示\
*
* 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
* 如果要使用\则需要使用\\来代替
*/
var reg = /\./;
reg = /\\/;
reg = new RegExp("\\.");
reg = new RegExp("\\\\");
/*
* \w
* - 任意字母、数字、_ [A-z0-9_]
* \W
* - 除了字母、数字、_ [^A-z0-9_]
* \d
* - 任意的数字 [0-9]
* \D
* - 除了数字 [^0-9]
* \s
* - 空格
* \S
* - 除了空格
* \b
* - 单词边界
* \B
* - 除了单词边界
*/
reg = /\w/;
reg = /\W/;
reg = /\d/;
reg = /\D/;
reg = /\s/;
reg = /\S/;
/*
* 创建一个正则表达式检查一个字符串中是否含有单词child
*/
reg = /\bchild\b/;
//console.log(reg.test("hello child "));
//接收一个用户的输入
//var str = prompt("请输入你的用户名:");
var str = " he llo ";
//去除掉字符串中的前后的空格
//去除空格就是使用""来替换空格
console.log(str);
//str = str.replace(/\s/g , "");
//去除开头的空格
//str = str.replace(/^\s*/, "");
//去除结尾的空格
//str = str.replace(/\s*$/, "");
// /^\s*|\s*$/g 匹配开头和结尾的空格
str = str.replace(/^\s*|\s*$/g,"");
console.log(str);
</script>
</head>
<body>
</body>
</html>
3.3 字符串和正则相关的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = "1a2b3c4d5e6f7";
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
* - 这个方法即使不指定全局匹配，也会全都插分
*/
/*
* 根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/);
//console.log(result);
/*
* search()
* - 可以搜索字符串中是否含有指定内容
* - 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
* - 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
* - serach()只会查找第一个，即使设置全局匹配也没用
*/
str = "hello abc hello aec afc";
/*
* 搜索字符串中是否含有abc 或 aec 或 afc
*/
result = str.search(/a[bef]c/);
//console.log(result);
/*
* match()
* - 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
* - 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
* 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
* 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
* - match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
*
*
*/
str = "1a2a3a4a5e6f7A8B9C";
result = str.match(/[a-z]/ig);
//console.log(result[2]);
/*
* replace()
* - 可以将字符串中指定内容替换为新的内容
* - 参数：
* 1.被替换的内容，可以接受一个正则表达式作为参数
* 2.新的内容
* - 默认只会替换第一个
*/
//result = str.replace(/[a-z]/gi , "@_@");
result = str.replace(/[a-z]/gi , "");
//console.log(result);
</script>
</head>
<body>
</body>
</html>
3.4 邮箱正则
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 电子邮件
* hello .nihao @ abc .com.cn
*
* 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
*
* \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
*/
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "abc.hello@163.com";
console.log(emailReg.test(email));
</script>
</head>
<body>
</body>
</html>
</script>
</head>
<body>
</body>
</html>
3.4 邮箱正则
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 电子邮件
* hello .nihao @ abc .com.cn
*
* 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
*
* \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
*/
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "abc.hello@163.com";
console.log(emailReg.test(email));
</script>
</head>
<body>
</body>
</html>
6907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
