021_字符串方法

最新推荐文章于 2024-07-14 03:39:45 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-07-14 03:39:45 发布

阅读量402

点赞数

分类专栏： JavaScript学习文章标签： javascript web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109567356

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

1. indexOf()方法

1.1. indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。

1.2. 语法

stringObject.indexOf(searchValue, fromIndex)

1.3. 参数

1.4. 该方法将从头到尾地检索字符串stringObject, 看它是否含有子串searchValue。开始检索的位置在字符串的fromIndex处或字符串的开头(没有指定fromIndex时)。如果找到一个searchValue, 则返回 searchValue的第一次出现的位置。

1.5. indexOf()方法对大小写敏感。

1.6. 如果要检索的字符串值没有出现, 则该方法返回-1。

2. lastIndexOf()方法

2.1. lastIndexOf()方法可返回一个指定的字符串值最后出现的位置, 在一个字符串中的指定位置从后向前搜索。

2.2. 语法

stringObject.lastIndexOf(searchValue, fromIndex)

2.3. 参数

2.4. 该方法将从尾到头地检索字符串stringObject, 看它是否含有子串searchValue。开始检索的位置在字符串的fromIndex处或字符串的结尾(没有指定fromindex时)。如果找到一个searchvalue, 则返回 searchValue的第一个字符在stringObject中的位置。

2.5. indexOf()方法对大小写敏感。

2.6. 如果要检索的字符串值没有出现, 则该方法返回-1。

2.7. lastIndexOf()方法加上第二个参数的检索是非常不好理解的。比如我们想在下面这个字符串中从后向前检索'China'这个字符串, 它最后一次出现的位置是51, 然后就会拿这个51和我们指定的fromIndex比大小, 如果fromIndex大于等于51, 说明我们要查找的'China'字符串, 在我们指定的位置之前, 是合法的返回51这个位置; 如果fromIndex小于51, 说明我们要查找的这个'China'字符串, 还在我们指定的位置之后, 是非法的, 需要继续向前检索。

2.8. 例子

2.8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>查找字符串中的字符串</title>
	</head>
	<body>
		<img src="character.png" alt="字符图片" />
		<script type="text/javascript">
			var str = "The full name of China is the People's Republic of China.";

			document.write('China第一次出现的位置: ' + str.indexOf("China") + '<br />');
			document.write('China最后一次出现的位置: ' + str.lastIndexOf("China") + '<br />');
			document.write('从下标是18的位置开始算, China第一次出现的位置: ' + str.indexOf("China", 18) + '<br />');
			document.write('从下标是16的位置开始算, China最后一次出现的位置: ' + str.lastIndexOf("China", 16) + '<br />');
			document.write('从下标是17的位置开始算, China最后一次出现的位置: ' + str.lastIndexOf("China", 17) + '<br />');
			document.write('从下标是18的位置开始算, China最后一次出现的位置: ' + str.lastIndexOf("China", 18) + '<br />');
			document.write('从下标是50的位置开始算, China最后一次出现的位置: ' + str.lastIndexOf("China", 50) + '<br />');
			document.write('从下标是51的位置开始算, China最后一次出现的位置: ' + str.lastIndexOf("China", 51) + '<br />');
			document.write('从下标是52的位置开始算, China最后一次出现的位置: ' + str.lastIndexOf("China", 52) + '<br />');
			document.write('xxx第一次出现的位置: ' + str.indexOf("xxx") + '<br />');
		</script>
	</body>
</html>

2.8.2. 效果图

3. search()方法

3.1. search()方法用于检索字符串中指定的字符串, 或检索与正则表达式相匹配的字符串。

3.2. 语法

stringObject.search(regexp)

3.3. 参数

3.4. 返回值是stringObject中第一个与regexp相匹配的子串的起始位置。

3.5. 如果没有找到任何匹配的子串, 则返回-1。

3.6. search()方法不执行全局匹配, 它将忽略标志g。它总是从字符串的开始进行检索, 这意味着它总是返回stringObject的第一个匹配的位置。

3.7. 例子

3.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>检索字符串中的字符串</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "The full name of China is the People's Republic of China";
			document.write('<b>我们检索的字符串是: ' + str + '</b><br />');
			document.write('China字符串第一次出现的位置: ' + str.search(/China/) + '<br />');
			document.write('search()方法不执行全局匹配, 它将忽略标志g, 加上了g标志, 返回的仍是China字符串第一次出现的位置: ' + str.search(/China/g) + '<br />');
			document.write('忽略大小写, china字符串第一次出现的位置: ' + str.search(/china/i) + '<br />');
			document.write('匹配字符串结尾是否有China字符串, 并返回它的位置: ' + str.search(/China$/) + '<br />');
		</script>
	</body>
</html>

3.7.2. 效果图

4. slice()方法

4.1. slice()方法用于提取字符串中介于两个指定下标之间的字符, 并以新的字符串返回被提取的部分。

4.2. 语法

stringObject.slice(start, end)

4.3. 参数

4.4. 该方法设置两个参数: 起始索引(开始位置), 终止索引(结束位置)。截取的字符串包含开始位置, 不包含结束位置。

4.5. 如果某个参数为负, 则从字符串的结尾开始计数。我们可以用字符串的长度加上负数参数, 来完成对负数参数截取字符串位置的判断。

4.6. 如果省略第二个参数, 则该方法将裁剪字符串的剩余部分。

4.7. slice()方法的起始位置不能比结束位置大(如果是负数, 比较的是字符串长度加上负数后的结果参数)。

4.8. 如果参数start与stop相等, 那么该方法返回的就是一个空串(即长度为0的字符串)。一般不这么做, 没意义。

4.9. 例子

4.9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>提取部分字符串-slice</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "People's Republic of China.";

			document.write('<b>原始字符串是: ' + str + ' 字符串长度: ' + str.length + '</b><br />');
			document.write('str.slice(21)返回字符串: ' + str.slice(21) + '<br />');
			document.write('str.slice(21, 26)返回字符串: ' + str.slice(21, 26) + '<br />');
			// 字符串长度是27, 27-6=21。所以位置是21, 27。
			document.write('str.slice(-6)返回字符串: ' + str.slice(-6) + '<br />');
			// 字符串长度是27, 27-6=21, 27-1=26。所以位置是21, 26。
			document.write('str.slice(-6, -1)返回字符串: ' + str.slice(-6, -1) + '<br />');
			// 字符串长度是27, 27-1=26。所以位置是21, 26。
			document.write('str.slice(21, -1)返回字符串: ' + str.slice(21, -1) + '<br />');
			document.write('str.slice(21, 21)起始和结束位置相等, 返回空字符串: ' + str.slice(21, 21) + '<br />');
		</script>
	</body>
</html>

4.9.2. 效果图

5. substring()方法

5.1. substring()方法用于提取字符串中介于两个指定下标之间的字符, 并以新的字符串返回被提取的部分。

5.2. 语法

stringObject.substring(start, stop)

5.3. 参数

5.4. 该方法设置两个参数: 起始索引(开始位置), 终止索引(结束位置)。截取的字符串包含开始位置, 不包含结束位置, 其长度为stop减start。

5.5. 如果省略第二个参数, 则该方法将裁剪字符串的剩余部分。

5.6. substring()方法不同于slice()的地方是, 无法接受负的索引。

5.7. 如果你传入一个负数索引, 它认为这个索引是0。

5.8. 如果起始位置比结束位置大, 它认为小的参数是起始位置, 大的参数是结束位置。

5.9. 如果参数start与stop相等, 那么该方法返回的就是一个空串(即长度为0的字符串)。一般不这么做, 没意义。

5.10. 例子

5.10.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>提取部分字符串-substring</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "People's Republic of China.";

			document.write('<b>原始字符串是: ' + str + ' 字符串长度: ' + str.length + '</b><br />');
			document.write('str.substring(21)返回字符串: ' + str.substring(21) + '<br />');
			document.write('str.substring(21, 26)返回字符串: ' + str.substring(21, 26) + '<br />');
			document.write('str.substring(26, 21)==str.substring(21, 26)返回字符串: ' + str.substring(26, 21) + '<br />');
			document.write('str.substring(-6)==str.substring(0)返回字符串: ' + str.substring(-6) + '<br />');
			document.write('str.substring(21, -1)==str.substring(0, 21)返回字符串: ' + str.substring(21, -1) + '<br />');
			document.write('str.substring(21, 21)起始和结束位置相等, 返回空字符串: ' + str.substring(21, 21) + '<br />');
		</script>
	</body>
</html>

5.10.2. 效果图

6. substr()方法

6.1. substr()方法可在字符串中抽取从start下标开始的指定数目的字符, 并以新的字符串返回被提取的部分。

6.2. 语法

stringObject.substr(start, length)

6.3. 参数

6.4. 该方法设置两个参数: 起始索引(开始位置), 被提取部分的长度。

6.5. 如果省略第二个参数, 则该方法将裁剪字符串的剩余部分。

6.6. ECMAscript没有对该方法进行标准化, 因此反对使用它。

6.7. length必须大于等于0, 如果指定为0, 截取0个字符, 返回空字符串; 如果指定为负数和0效果一样。

6.8. 如果开始位置参数为负, 则从字符串的结尾开始计数。我们可以用字符串的长度加上负数参数, 来完成对负数参数截取字符串位置的判断。

6.9. 例子

6.9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>提取部分字符串-substr</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "People's Republic of China.";

			document.write('<b>原始字符串是: ' + str + ' 字符串长度: ' + str.length + '</b><br />');
			document.write('str.substr(21)返回字符串: ' + str.substr(21) + '<br />');
			document.write('str.substr(21, 5)返回字符串: ' + str.substr(21, 5) + '<br />');
			document.write('str.substr(21, 0)返回字符串: ' + str.substr(21, 0) + '<br />');
			document.write('str.substr(21, -5)返回字符串: ' + str.substr(21, -5) + '<br />');
			// 字符串长度是27, 27-6=21。返回位置是21之后的所有字符。
			document.write('str.substr(-6)返回字符串: ' + str.substr(-6) + '<br />');
		</script>
	</body>
</html>

6.9.2. 效果图

7. replace()方法

7.1. replace()方法用于在字符串中用一些字符替换另一些字符, 或替换一个与正则表达式匹配的子串。

7.2. 语法

stringObject.replace(regexp/substr, replacement)

7.3. 参数

7.4. replace()方法不会改变调用它的字符串。它返回的是新字符串。

7.5. 默认地, replace()只替换首个匹配。如需替换所有匹配, 请使用正则表达式的g标志(用于全局搜索)。

7.6. 默认地, replace()对大小写敏感。如需执行大小写不敏感的替换, 请使用正则表达式的i标志(大小写不敏感)。

7.7. 参数replacement中的$字符具有特定的含义。如下表所示, 它说明从模式匹配得到的字符串将用于替换。

7.8. 参数replacement可以是函数, 在这种情况下, 每个匹配都调用该函数, 它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串, 可以有0个或多个这样的参数。接下来的参数是一个整数, 声明了匹配在stringObject中出现的位置。最后一个参数是stringObject本身。

7.9. 例子

7.9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>替换字符串内容-replace</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "HeNan software treasure technology company is in henan.";

			document.write('<b>原始字符串是: ' + str + '</b><br />');
			document.write('str.replace("HeNan", "ZhengZhou")返回字符串: ' + str.replace("HeNan", "ZhengZhou") + '<br />');
			document.write('str.replace(/henan/i, "ZhengZhou")返回字符串: ' + str.replace(/henan/i, "ZhengZhou") + '<br />');
			document.write('str.replace(/HeNan/ig, "zhengzhou")返回字符串: ' + str.replace(/HeNan/ig, "zhengzhou") + '<br /><br />');
			document.write('函数参数的使用: ' + str.replace(/(\w+)\s*(\.)/g, function(str, substr1, substr2, index, mySelf){
				document.write('第一个参数是匹配模式的字符串: ' + str + '<br />');
				document.write('第二个参数是与模式中的子表达式匹配的字符串: ' + substr1 + '<br />');
				document.write('第三个参数是与模式中的子表达式匹配的字符串: ' + substr2 + '<br />');
				document.write('倒数第二个参数是一个整数, 声明了匹配在stringObject中出现的位置: ' + index + '<br />');
				document.write('最后一个参数是stringObject本身: ' + mySelf + '<br />');
				return 'zhengzhou.';
			}) + '<br /><br />');
			document.write('$1、$2、...、$99的使用: ' + str.replace(/(\w+)\s*(\w+)\s*(\w+)\s*(\w+)\s*(\w+)\s*(\w+)\s*(\w+)\s*(\w+)(\.)/, '$9$8 $7 $6 $5 $4 $3 $2 $1') + '<br />');
			document.write('$&的使用: ' + str.replace(/\s+(\w+)\s+/, "($&)") + '<br />');
			document.write('$`的使用: ' + str.replace(/\s+(\w+)\s+/, "($`)") + '<br />');
			document.write("$'的使用: " + str.replace(/\s+(\w+)\s+/, "($')") + '<br />');
			document.write("$$'的使用: " + str.replace(/\s+(\w+)\s+/, "($$')") + '<br />');
		</script>
	</body>
</html>

7.9.2. 效果图

8. toLowerCase()方法

8.1. toLowerCase()方法用于把字符串转换为小写。

8.2. 语法

stringObject.toLowerCase()

8.3. 返回一个新的字符串, 在其中stringObject的所有大写字符全部被转换为了小写字符。原字符串不变。

9. toUpperCase()方法

9.1. toUpperCase()方法用于把字符串转换为大写。

9.2. 语法

stringObject.toUpperCase()

9.3. 返回一个新的字符串, 在其中stringObject的所有小写字符全部被转换为了大写字符。原字符串不变。

9.4. 例子

9.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换为大写和小写</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "Hello World!";
			var res1 = str.toUpperCase();
			var res2 = str.toLowerCase();

			window.alert('str = ' + str + '\r\nres1 = ' + res1 + '\r\nres2 = ' + res2);
		</script>
	</body>
</html>

9.4.2. 效果图

10. concat()方法

10.1. concat()方法用于连接两个或多个字符串。

10.2. 语法

stringObject.concat(stringX, stringX, ..., stringX)

10.3. 参数

10.4. concat()方法将把它的所有参数转换成字符串, 然后按顺序连接到字符串stringObject的尾部, 并返回连接后的字符串。请注意, stringObject本身并没有被更改。

10.5. 使用"+"运算符来进行字符串的连接运算通常会更简便一些。

10.6. 例子

10.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>连接字符串</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "Hello";
			var text = "World";
			var res1 = str.concat(" ", text);
			var res2 = str + ' ' + text;

			window.alert(res1 + '\r\n' + res2);
		</script>
	</body>
</html>

10.6.2. 效果图

11. 删除字符串两端的空白符

11.1. trim()方法删除字符串两端的空白符。

11.2. 例子

11.2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>删除字符串两端的空白符</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "       Hello World!        "

			window.alert(str.trim());
		</script>
	</body>
</html>

11.2.2. 效果图

12. charAt()方法

12.1. charAt()方法可返回指定位置的字符。这个方法只认识Unicode编码在0-65535之间的字符。

12.2. 语法

stringObject.charAt(index)

12.3. 参数

12.4. 如果参数index不在0与string.length之间, 该方法将返回一个空字符串。

13. charCodeAt()方法

13.1. charCodeAt()方法可返回指定位置的字符的Unicode编码。这个返回值是0-65535之间的整数。

13.2. 语法

stringObject.charCodeAt(index)

13.3. 参数

13.4. 如果index是负数, 或大于等于字符串的长度, 则charCodeAt()返回NaN。

13.5. 例子

13.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>提取字符串字符</title>
	</head>
	<body>
		&#x30; = 48<br />
		&#x61; = 97<br />
		&#x4e2d; = 20013<br />
		&#xffff; = 65535<br />
		&#x20001; = 131073<br /><br />

		<script type="text/javascript">
			var str = "0a中𠀁";

			document.write('<b>原始字符串: ' + str + '</b><br />');
			document.write('str.charAt(0) = ' + str.charAt(0) + ', 对应的Unicode值: ' + str.charCodeAt(0) + '<br />');
			document.write('str.charAt(1) = ' + str.charAt(1) + ', 对应的Unicode值: ' + str.charCodeAt(1) + '<br />');
			document.write('str.charAt(2) = ' + str.charAt(2) + ', 对应的Unicode值: ' + str.charCodeAt(2) + '<br />');
			document.write('str.charAt(3) = ' + str.charAt(3) + ', 对应的Unicode值: ' + str.charCodeAt(3) + '<br /><br />');
			document.write('charAt()和charCodeAt()方法只认识0-65535的部分, 最后一个字符它不认识:' + '<br />');
			document.write('<del>str.charAt(4) = ' + str.charAt(4) + ', 对应的Unicode值: ' + str.charCodeAt(4) + '</del><br /><br />');
			document.write('index不在0与string.length之间, charAt(9)方法将返回一个空字符串 = ' + str.charAt(9) + '<br />');
			document.write('如果index是负数, 或大于等于字符串的长度, 则charCodeAt(9)返回NaN: ' + str.charCodeAt(9) + '<br />');
		</script>
	</body>
</html>

13.5.2. 效果图

14. split()方法

14.1. split()方法用于把一个字符串分割成字符串数组。

14.2. 语法

stringObject.split(separator, howmany)

14.3. 参数

14.4. 返回一个字符串数组。该数组是通过在separator指定的边界处将字符串stringObject分割成子串创建的。返回的数组中的字串不包括separator自身。

14.5. 如果separator是包含子表达式的正则表达式, 那么返回的数组中包括与这些子表达式匹配的字串(但不包括与整个正则表达式匹配的文本)。

14.6. 如果分隔符是"", 被返回的数组将是间隔单个字符的数组。

14.4. 例子

14.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>把字符串转换为数组</title>
	</head>
	<body>
		<script type="text/javascript">
			var txt = "zhangsan|lisi|wangwu|zhaoliu"; 
			var res1 = txt.split("|");
			var res2 = txt.split("");
			var res3 = txt.split("", 3);
			var res4 = txt.split(/(lisi)(\|)/);

			window.alert(res1 + '\r\n' + res2 + '\r\n' + res3 + '\r\n' + res4);
		</script>
	</body>
</html>

14.4.2. 效果图

15. 属性访问字符串

15.1. JavaScript允许对字符串使用以[]+下标的方式进行属性访问。

15.2. 它让字符串看起来像是数组(其实并不是)。

15.3. 如果找不到字符, 返回undefined。

15.4. 它是只读的。

15.5. 例子

15.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>属性访问字符串</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "HELLO WORLD";

			window.alert(str[0] + "\r\n" + str[-1]);
		</script>
	</body>
</html>

15.5.2. 效果图

16. match()方法

16.1. match()方法可在字符串内检索指定的值或找到一个或多个正则表达式的匹配。

16.2. 语法

stringObject.match(searchvalue)
stringObject.match(regexp)

16.3. 参数

16.4. 返回值存放匹配结果的数组。match()方法将检索字符串stringObject, 以找到一个或多个与regexp匹配的文本。这个方法的行为在很大程度上有赖于regexp是否具有标志g。

16.5. 如果regexp没有标志g, 那么match()方法就只能在stringObject中执行一次匹配。如果没有找到任何匹配的文本, match()将返回null。否则, 它将返回一个数组, 其中存放了与它找到的匹配文本有关的信息。该数组的第0个元素存放的是匹配文本, 而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外, 返回的数组还含有两个对象属性。index属性声明的是匹配文本的起始字符在stringObject中的位置, input属性声明的是对stringObject的引用。

16.6. 如果regexp具有标志g, 则match()方法将执行全局检索, 找到stringObject中的所有匹配字符串。若没有找到任何匹配的子串, 则返回null。如果找到了一个或多个匹配子串, 则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同, 它的数组元素中存放的是stringObject中所有的匹配子串, 而且也没有index属性或input属性。

16.7. 在全局检索模式下, match()即不提供与子表达式匹配的文本的信息, 也不声明每个匹配子串的位置。如果您需要这些全局检索的信息, 可以使用RegExp.exec()。

16.8. 例子

16.8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>match()方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "The full name of China is the People's Republic of China。";
			document.write('<b>我们检索的字符串是: ' + str + '</b><hr />');
			
			var r1 = str.match('China');
			document.write('<b>匹配字符串是: China</b><br />');
			document.write('匹配结果: ' + r1 + '<br />匹配位置: ' + r1.index + '<br />匹配(查找)的字符串: ' + r1.input + '<hr />');

			var r2 = str.match(/china/i);
			document.write('<b>匹配模式是: /china/i</b><br />');
			document.write('匹配结果: ' + r2 + '<br />匹配位置: ' + r2.index + '<br />匹配(查找)的字符串: ' + r2.input + '<hr />');

			var r3 = str.match(/china(。)/i);
			document.write('<b>匹配模式是: /china(。)/i</b><br />');
			document.write('匹配结果: ' + r3 + '<br />匹配位置: ' + r3.index + '<br />匹配(查找)的字符串: ' + r3.input + '<hr />');

			var r4 = str.match(/china/ig);
			document.write('<b>匹配模式是: /china/ig</b><br />');
			document.write('匹配结果: ' + r4 + '<br />匹配位置: ' + r4.index + '<br />匹配(查找)的字符串: ' + r4.input + '<hr />');

			var r5 = str.match(/(of\s)china/ig);
			document.write('<b>匹配模式是: /(of\\s)china/ig</b><br />');
			document.write('匹配结果: ' + r5 + '<br />匹配位置: ' + r5.index + '<br />匹配(查找)的字符串: ' + r5.input);
		</script>
	</body>
</html>

16.8.2. 效果图