前端点滴(JS基础)(三)----倾尽所有
- JavaScript 内置对象(二)
- String 对象
- 1. String 对象实例
- 2. String 对象方法
- String 对象的查询、连接
- 1. charAt() 返回在指定位置的字符。
- 2. charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
- 3. includes() 查找字符串中是否包含指定的完整的子字符串。
- 4. indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
- 5. lastIndexOf() 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。
- 6. match() 查找找到一个或多个正则表达式的匹配。
- 7. search() 查找与正则表达式相匹配的值。
- 8. startsWith() 查看字符串是否以指定的子字符串开头。
- 9. valueOf() 返回某个字符串对象的原始值。
- 10. concat() 连接两个或更多字符串,并返回新的字符串。
- String 对象的替换、转换
- String 对象的截取、分割、重复(复制粘贴)、去空白
- 总结
JavaScript 内置对象(二)
String 对象
String 对象用于处理文本(字符串)。
1. String 对象实例
var txt = new String("string");
或者更简单方式:
var txt = "string";
2. String 对象方法
String 对象的查询、连接
1. charAt() 返回在指定位置的字符。
语法:string.charAt(index)
定义:
charAt() 方法查询并返回指定位置的字符。
第一个字符位置为 0, 第二个字符位置为 1,以此类推。
实例:
/* 查询字符串中第三个元素,并返回 */
/* 查询第 n 个 , index = n-1 */
var str = "HELLO WORLD";
var n = str.charAt(2);
console.log(n); //=> L
2. charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
语法:string.charCodeAt(index)
定义:
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。
字符串中第一个字符的位置为 0, 第二个字符位置为 1,以此类推。
常用的unicode编码范围:
0x表示16进制
汉字:[0x4e00,0x9fa5](或十进制[19968,40869])
数字:[0x30,0x39](或十进制[48, 57])
小写字母:[0x61,0x7a](或十进制[97, 122])
大写字母:[0x41,0x5a](或十进制[65, 90])
实例:
/* 查询字符串第三个字符的unicode编码,并返回 */
var str = "HELLO WORLD";
var n = str.charCodeAt(2);
console.log(n); //=> 76
3. includes() 查找字符串中是否包含指定的完整的子字符串。
语法:string.includes(searchvalue, start)
定义:
includes() 方法用于判断字符串是否包含指定的完整的子字符串。
如果找到匹配的字符串则返回 true,否则返回 false。
注意: includes() 方法区分大小写。
注意: searchvalue 必需,要查找的字符串。
注意: start 可选,设置从那个位置开始查找,默认为 0。
注意: 返回值是一个Boolean类型的值。
注意: 填写 index 时,需要考虑空白字符串。
实例:
/* 默认从字符串开头查找 */
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world");
console.log(n); //=> true
/* 从规定的地方开始查找 */
var n = str.includes("world",8);
console.log(n); //=> false
4. indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
语法:string.indexOf(searchvalue,start)
定义:
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
注意: indexOf() 方法区分大小写。
注意: 填写 index 时,需要考虑空白字符串,以及一些符号(,!.?)。
参数说明同上;
实例:
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
console.log(n); //=> 13
/* 注意区分大小写 */
var str="Hello world, welcome to the universe.";
var n=str.indexOf("Welcome");
console.log(n); //=> -1
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome",13);
console.log(n); //=> 13
5. lastIndexOf() 从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。
语法:string.lastIndexOf(searchvalue,start)
定义:
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索。
开始检索的位置在字符串的 start 处或字符串的结尾(没有指定 start 时)。
如果没有找到匹配字符串则返回 -1 。
注意: lastIndexOf() 方法是区分大小写的。
注意: 定义了start就从start开始往前搜索。没有定义就从0往后搜索。
注意: 该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。
实例:
/* 没有定义start */
var str="I am from runoob,welcome to runoob site.";
var n=str.lastIndexOf("runoob");
console.log(n); //=> 28
/* 定义了start */
var str="I am from runoob,welcome to runoob site.";
var n=str.lastIndexOf("runoob",9);
console.log(n); //=> -1
/* 定义了start */
var str="I am from runoob,welcome to runoob site.";
var n=str.lastIndexOf("runoob",20);
console.log(n); //=> 10
6. match() 查找找到一个或多个正则表达式的匹配。
语法:string.match(regexp)
定义:
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。regexp 表示正则表达式
注意: match() 方法是区分大小写的。但是可以设置 i 标志忽略大小写。
注意: match() 方法将检索字符串 String Object,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g(全局标志)。如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配(只返回一个)。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。
实例:
/* 不区分大小写( i 标志),全局查找 */
var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/gi);
console.log(n); //=> ["ain", "AIN", "ain", "ain"]
/* 区分大小写,全局查找 */
var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/g);
console.log(n); //=> ["ain", "ain", "ain"]
/* 区分大小写,非全局查找 */
var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/);
console.log(n); //=> ["ain"]
/* 返回null */
var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/as/);
console.log(n); //=> null
7. search() 查找与正则表达式相匹配的值。
语法:string.search(searchvalue)
定义:
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。输出的是字符串匹对位置
如果没有找到任何匹配的子串,则返回 -1。
注意: 默认情况下search() 区分大小写。
注意: searchvalue可以是正则表达式,还可以是字符串
实例:
/* 匹配字符串 */
var str="Visit MyBlog!";
var n=str.search("MyBlog");
console.log(n); //=> 6
/* 匹配正则表达式 */
var str="Visit MyBlog!";
var n=str.search(/MyBlog/);
console.log(n); //=> 6
/* 匹配正则表达式 */
var str="Visit MyBlog,Visit MyBlog,Visit MyBlog!";
var n=str.search(/MyBlog/g);
console.log(n); //=> 6
/* 匹配正则表达式,忽略大小写 */
var str="Visit MyBlog,Visit MyBlog,Visit MyBlog!";
var n=str.search(/myBlog/gi);
console.log(n); //=> 6
8. startsWith() 查看字符串是否以指定的子字符串开头。
语法:string.startsWith(searchvalue, start)
定义:
startsWith() 方法用于检测字符串是否以指定的子字符串开始。
如果是以指定的子字符串开头返回 true,否则 false。
注意: startsWith() 方法区分大小写。
注意: start 可选,查找的开始位置,默认为 0。
注意: 返回的是Boolean类型的值
实例:
/* 默认情况 */
var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("world");
console.log(n); //=> false
/* 带有start */
var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("world", 6);
console.log(n); //=> true
9. valueOf() 返回某个字符串对象的原始值。
语法:string.valueOf()
定义:
valueOf() 方法可返回 String 对象的原始值。
注意: valueOf() 方法通常由 JavaScript 在后台自动进行调用,而不是显式地处于代码中。
实例:
var str="Hello world!";
var n = str.valueOf();
console.log(n); //=> "Hello world!"
10. concat() 连接两个或更多字符串,并返回新的字符串。
语法:string.concat(string1, string2, ..., stringX)
定义:
concat() 方法用于连接两个或多个字符串。
注意: 该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串。
注意: 连接多个字符串是用逗号“,”隔开。
实例:
var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2);
console.log(n); //=> "Hello world!"
String 对象的替换、转换
1. replace() 在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串。
语法:string.replace(searchvalue,newvalue)
定义:
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。(只替换一次)
注意: replace()不会改变原始的字符串。
注意: 默认情况下区分大小写。
注意: searchvalue 可以是字符串,也可以是正则表达式
实例:
/* 默认情况 */
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","MyBlog");
console.log(n); //=> "Visit MyBlog! Visit Microsoft!"
/* 使用正则表达式 ,加上全局标志*/
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace(/Microsoft/g,"MyBlog");
console.log(n); //=> "Visit MyBlog! Visit MyBlog!"
/* 使用正则表达式,忽略大小写 ,加上全局标志*/
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace(/microsoft/gi,"MyBlog");
console.log(n); //=> "Visit MyBlog! Visit MyBlog!"
实例二 (知识回顾)(通过 prototype 为 JavaScript 的 String 对象添加方法,来实现将所有 “Microsoft” 替换为 “MyBlog”):
var str="Visit Microsoft! Visit Microsoft!";
String.prototype.replaceFn = function (search, replacement){
var target = this;
return target .replace(new RegExp(search,"g"),replacement);
}
console.log(str.replaceFn("Microsoft","MyBlog")); //=> "Visit MyBlog! Visit MyBlog!"
2. toLowerCase() 把字符串全转换为小写。
语法:string.toLowerCase()
定义:
toLowerCase() 方法用于把字符串全转换为小写。
注意: toLowerCase() 不会改变原始字符串。
实例:
var str="MyBlog";
var n = str.toLowerCase();
console.log(str); //=> "MyBlog"
console.log(n); //=> "myblog"
3. toUpperCase() 把字符串全转换为大写。
语法:string.toUpperCase()
定义:
toUpperCase() 方法用于把字符串全转换为大写。
注意: toUpperCase() 不会改变原始字符串。
实例:
var str="myblog";
var n = str.toUpperCase();
console.log(str); //=> "myblog"
console.log(n); //=> "MYBLOG"
4. toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。
语法:string.toLocaleLowerCase()
定义:
toLocaleLowerCase() 方法根据本地主机的语言环境把字符串转换为小写。
本地是根据浏览器的语言设置来判断的。
通常,该方法与 toLowerCase() 方法返回的结果相同
注意: toLocaleLowerCase() 不会改变原始字符串。
实例:
var str="MyBlog";
var n = str.toLocaleLowerCase();
console.log(str); //=> "MyBlog"
console.log(n); //=> "myblog"
5. toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。
语法:string.toLocaleUpperCase()
定义:
toLocaleUpperCase() 方法根据本地主机的语言环境把字符串转换为小写。
本地是根据浏览器的语言设置来判断的。
通常,该方法与 toUpperCase() 方法返回的结果相同
注意: toLocaleUpperCase() 不会改变原始字符串。
实例:
var str="myblog";
var n = str.toLocaleUpperCase();
console.log(str); //=> "myblog"
console.log(n); //=> "MYBLOG"
6. toString() 返回一个字符串。
语法:string.toString()
定义:
toString() 方法返回一个表示 String 对象的值。
实例:
var str = "MyBlog";
var res = str.toString();
console.log(res); //=> "MyBlog"
String 对象的截取、分割、重复(复制粘贴)、去空白
1. slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
语法:string.slice(start,end)
定义:
slice(start, end) 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
使用 start 和 end 参数来指定字符串提取的部分。
字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推。
注意: slice() 不会改变原始字符串。
注意: 如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。
实例:
/* 默认截取全部 */
var str="Hello world!";
var n=str.slice(0);
console.log(n); //=> "Hello world!"
/* 带有start,end参数 */
/* 从第n个字符开始截取 start = n-1*/
/* 从第二个字符开始截取(截取第二个字符) ,截取到第六个*/
var str="Hello world!";
var n=str.slice(1,6);
console.log(n); //=> "ello "
/* 截取第一个字符,并要求返回str字符串首字母大写 */
var str="hello world!";
var n =str.slice(0,1).toUpperCase();
var n2 = str.slice(1);
var n3 = n+n2;
console.log(n3); //=> "Hello world!"
/* 提取最后一个字符 */
var str="Hello world!";
var n=str.slice(-1);
console.log(n); //=> !
2. substr() 从起始索引号提取字符串中指定数目的字符。
语法:string.substr(start,length)
定义:
substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。
注意: substr() 不会改变原始字符串。
注意: 不设置length,默认到最后。
注意: substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。
在 IE 4 中,参数 start 的值无效。在这个 BUG 中,start 规定的是第 0 个字符的位置。在之后的版本中,此 BUG 已被修正。
ECMAscript 没有对该方法进行标准化,因此反对使用它。
实例:
/* 从第n个字符开始截取(截取第n个) start = n-1 */
/* 截取第三个字符到最后 */
var str="Hello world!";
var n=str.substr(2);
console.log(n); //=> "llo world!"
/* 截取第三个字符*/
var str="Hello world!";
var n=str.substr(2,1);
console.log(n); //=> "l"
3. substring() 提取字符串中两个指定的索引号之间的字符。
语法:string.substring(from, to)
定义:
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
注意: substring() 不会改变原始字符串。
实例:
/* 截取第3~7的字符 */
var str="Hello world!";
var n=str.slice(2,7);
console.log(n); //=> "llo w"
4. split() 把字符串分割为字符串数组。
语法:string.split(separator,limit)
定义:
split() 方法用于把一个字符串分割成字符串数组。
注意: split() 方法不改变原始字符串。
注意: 如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。(小分割)
注意: limit 该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
实例:
/* 大分割 */
var str="How are you doing today?";
var n=str.split(' ');
console.log(n) //=> ["How", "are", "you", "doing", "today?"]
/* 小分割 */
var str="How are you doing today?";
var n=str.split('');
console.log(n) //=> ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]
/* 设置了 length */
var str="How are you doing today?";
var n=str.split(' ',2);
console.log(n) //=> ["How", "are"]
5. repeat() 复制字符串指定次数,并将它们连接在一起返回。
语法:string.repeat(count)
定义:
epeat() 方法字符串复制指定次数。(复制粘贴)
注意: repeat() 方法不改变原始字符串。
注意: count 为复制粘贴次数,必填,若果不填返回结果为 " "
实例:
var str = "hello";
var res = str.repeat(2);
console.log(res); //=> "hellohello"
var str = "hello";
var res = str.repeat();
console.log(res); //=> ""
6. trim() 去除字符串两边的空白
语法:string.trim()
定义:
trim() 方法用于删除字符串的头尾空格。
注意: trim() 方法不会改变原始字符串。
实例:
var str = " hello ";
var res = str.trim();
console.log(res); //=> "hello"
如果浏览器不支持 trim() 方法,还可以使用replace()、正则表达式来实现:
function myTrim(x) {
return x.replace(/^\s+|\s+$/gm,''); // 此为正则表达式,表示字符串全局头尾空白被''(空)替代
}
function myFunction() {
var str = myTrim(" Runoob ");
console.log(str);
}
myFunction(); //=> "Runoob"
总结
String 对象中的所有方法均不会改变原始String对象实例。
String 对象中的常用方法:
查询:indexOf、match、search。查询方法默认情况下均对大小写敏感。
连接:concat。
替换:replace。
转换:toLowerCase、toUpperCase。
截取:slice、substr。
分割:split。
复制:repeat。
去空白:trim。
其中涉及到正则表达式,在后期进行表单验证、登录验证…信息验证时显得非常关键