前言
字符串是一种非常重要的数据类型, 在 Java 等面向对象编程语言中, 它代表对象类型, 而在 JavaScript 中它却是一种基本数据类型, 在开发的领域中, 我们经常会碰到, 无论是前端还是后台. 比如后台验证手机号码, 将手机号码的后四位变成 *, 这些都是对字符串的处理. 所以学会字符串中常用的属性和方法是非常必要的, 本篇博客将带你解析字符串常用的属性和方法. 那么一起来看看吧!
字符串常用的属性和方法
属性
length: 返回字符串的长度
方法
chatAt(): 返回在指定位置的字符
charCodeAt(): 返回在指定位置字符的 unicode 编码(ASCII 编码)
concat(): 连接字符串
indexOf(): 从字符串的开头向后搜索字符串
lastIndexOf(): 从字符串的末尾向前搜索字符串
match(): 找到一个或多个正则表达式的匹配
replace(): 替换与正则表达式匹配的字串
search(): 检索与正则表达式相匹配的值
slice(): 提取字符串的片段, 并在新的字符串中返回被提取的部分
split(): 把字符串分割成字符串数组
substr(): 从起始索引号提取字符串中指定数目的字符
substring(): 截取字符串中两个指定的索引号之间的字符
toLowerCase(): 将字符串转换为小写
toUpperCase(): 将字符串转换为大写
toString(): 返回字符串本身
valueOf(): 返回某个对象的原始值
trim(): 删除前置及后缀的所有空格
实例讲解
(1):length 属性
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 字符串的 length 属性
- </title>
- </head>
- <body>
- <script type="text/javascript">
- //1: 创建字符串
- var str1 = new String('Hello World'); // 通过 new 关键字
- var str2 = 'Hello World'; // 字面量
- console.log(str1.length); // 长度为 11
- console.log(str2.length); // 长度为 11
- </script>
- </body>
- </HTML>
(2): 字符方法 charAt()和 charCodeAt()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 字符方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var str = 'Hello World'; // 创建字符串
- //1: 测试 charAt()方法
- console.log(str.charAt(1)); // 返回 e
- //2: 测试 charCodeAt()方法
- console.log(str.charCodeAt(1)); // 返回 101(ASCII 编码)
- console.log(str[1]); // 返回 e
- </script>
- </body>
- </HTML>
(3): 字符串操作方法 concat(),slice(),substr(),substring()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 字符串的操作方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- //1: 测试 concat()方法
- var str1 = 'Hello';
- var result = str1.concat('World');
- console.log(str1); //Hello
- console.log(result); //Hello World
- //2: 测试 slice(startIndex,[lastIndex])方法
- // 参数: 开始下标, 结束下标(可选)
- var stringValue = 'hello world';
- console.log(stringValue.slice(3)); //lo world
- console.log(stringValue.slice(3, 7)); //lo w
- //3: 测试 substr(startIndex,[lastIndex])方法
- // 参数: 开始下标, 结束下标(可选)
- console.log(stringValue.substr(3)); //lo world
- console.log(stringValue.substr(3, 7)); // lo worl
- //4: 测试 substring(startIndex,[lastIndex])方法
- // 参数: 开始下标, 结束下标(可选)
- console.log(stringValue.substring(3)); //lo world
- console.log(stringValue.substring(3, 7)); //lo w
- var item = 'hello world';
- console.log(item.slice( - 3)); //rld
- console.log(item.substr( - 3)); //rld
- console.log(item.substring( - 3)); //hello world
- console.log(item.slice(3, -4)); //lo w
- console.log(item.substr(3, -4)); //''空字符串
- console.log(item.substring(3, -4)); //hel
- </script>
- </body>
- </HTML>
这三个方法都返回被操作字符串的一个字符串, 而且也接受一个或两个参数, 当接受两个参数时, 不包含结束下标, 第一个参数指定字符串的起始位置, 第二个参数 (在指定的情况下) 表示子字符串到哪里结束, 具体来说, slice()和 substring()的第二个参数指定的是字符串最后一个字符后面的位置, 而 substr()的第二个参数指定的则是返回的字符个数. 如果没有给这些方法指定第二个参数, 则将字符串的末尾作为结束位置.
在传递这些方法的参数是负值的情况下, 它们的行为就不尽相同了, 其中 slice()方法会将传入的负值与字符串长度相加, substr()方法将负的第一个参数加上字符串的长度, 而将负的第二个参数转换为 0. 最后, substring()方法会将所有负值参数转换为 0.
(4): 字符串位置方法 indexOf()和 lastIndexOf()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 字符串位置方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var stringValue = 'hello world';
- //1: 测试 inexOf()方法
- console.log(stringValue.indexOf('o')); //4
- console.log(stringValue.indexOf('o', 6)); //7
- //2: 测试 lastIndexOf()方法
- console.log(stringValue.lastIndexOf('o')); //7
- console.log(stringValue.lastIndexOf('o', 6)); //4
- var item = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit';
- var positions = new Array();
- var pos = item.indexOf('e');
- while (pos > 1) {
- positions.push(pos);
- pos = item.indexOf('e', pos + 1);
- }
- console.log(positions); //3,24,32,35,52;
- </script>
- </body>
- </HTML>
(5):trim()方法
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- trim()方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var str = 'hello world';
- var trimStr = str.trim();
- console.log(str); // hello world
- console.log(trimStr); //hello world
- </script>
- </body>
- </HTML>
(6): 字符串大小写转换方法 toLowerCase()和 toUpperCase()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 字符串大小写方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var str = 'Hello World';
- console.log(str.toLowerCase()); //hello world
- console.log(str.toUpperCase()); //HELLO WORLD
- console.log(str.toLocaleLowerCase()); //hello world
- console.log(str.toLocaleUpperCase()); //HELLO WORLD
- </script>
- </body>
- </HTML>
(7): 字符串的模式匹配方法 split(),match(),replace(),search()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 字符串的模式匹配方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- //1: 测试 match()方法
- var text1 = 'cat, bat, sat, fat';
- var pattern = /.at/;
- var matches = text1.match(pattern);
- console.log(matches.index); //0
- console.log(matches[0]); //cat
- console.log(pattern.lastIndex); //0
- //2: 测试 search()方法
- var text2 = 'cat bat, sat, fat';
- var pos = text2.search(/at/);
- console.log(pos); //1
- //3: 测试 replace()方法
- var text3 = 'cat, bat, sat, fat';
- var result = text3.replace('at', 'ond');
- console.log(result); //cond,bat,sat,fat
- result = text3.replace(/at/g, 'ond');
- console.log(result); //cond,bond,sond,fond
- //4: 测试 split()方法
- var text4 = 'red,blue,green,yellow';
- var colors1 = text4.split(',');
- var colors2 = text4.split(',', 2);
- console.log(colors1); //['red','blue','green','yellow'];
- console.log(colors2); //['red','blue'];
- </script>
- </body>
- </HTML>
match()方法本质上与调用 RegExp 的 exec()方法相同, match()方法只接受一个参数, 要么是一个正则表达式, 要么是一个 RegExp 对象.
search()方法与 match()方法的参数相同, 有字符串或 RegExp 对象指定的一个正则表达式, search()方法返回字符串中第一个匹配项的索引, 如果没有找到匹配项, 则返回 - 1, 而且, search()方法始终从字符串开头向后匹配查找模式.
replace()方法接收两个参数, 第一个参数可以是一个 RegExp 对象或者一个字符串 (这个字符串不会被转换成正则表达式), 第二个参数可以可以是一个字符串或者一个函数. 如果第一个参数是字符串, 那么只会替换第一个子字符串. 要想替换所有子字符串, 唯一的方法就是提供一个正则表达式, 而且要指定全局(g) 标志.
split()方法可以基于指定的分隔符将一个字符串分割成多少个字符串, 并将结果放在数组中. 分隔符可以是字符串, 也可以是一个 RegExp 对象 (这个方法不会将字符串看成正则表达式).split() 方法可以接受可选的第二个参数, 用于指定数组的大小, 以确保返回的数组不会超过既定大小.
总结
字符串是 JavaScript 中的一种基本数据类型, JavaScript 的字符串是不可变的, String 类定义的方法都不能改变字符串的内容, 返回的都是全新的字符串, 而不是原始的字符串.
来源: https://www.cnblogs.com/jjgw/p/11608617.html