JS，字符串的语法+示例，超详细！！！

最新推荐文章于 2023-11-16 21:24:52 发布

数次拒绝刘亦菲

最新推荐文章于 2023-11-16 21:24:52 发布

阅读量499

点赞数

分类专栏： JS 文章标签： javascript 前端原型模式

本文链接：https://blog.csdn.net/m0_62951223/article/details/126924405

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

字符的表示

字符用单引号或双引号包围：‘a’或"a"

如果字符串中需要出现单引号或双引号则需要反斜线（\）进行转义

<script>
			var s1 = 'xxxx';
			var s2 = "xxxx";
			var s3 = 'X\'xxx';
			var s4 = "X\"xxx"
			console.log(JSON.stringify(s1));
			console.log(JSON.stringify(s2));
			console.log(JSON.stringify(s3));
			console.log(JSON.stringify(s4));
</script>

字符串与数组类似，每个字符都有一个索引，索引从0开始，可以用中括号[]来访问指定位置的字符

<script>
			var s1 = 'abcd';
			for(var i in s1)
			console.log(JSON.stringify(s1[i]));
</script>

字符串属性

length属性

length属性表示该字符串中的字符总数，而不是字节总数

<script>
			var s1 = 'abcd';
			var s2 = 'a b c d'
 			console.log(s1.length);
			console.log(s2.length);
</script>

prototype属性

String.prototype是字符串的原始对象，字符串从这个原型对象继承方法。与Array.prototype一样，可以给String.prototype增加方法

举例：给字符串原型定义size()方法，用于获取字符串中的字符总数

字符串操作

字符串是不可变的：字符串不能更改，只能替换。

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

查找字符串

indexOf()

indexOf用于从前往后搜索子串在字符串中首次出现的位置，有则返回第一个字符的下标，没有则返回-1

语法：

str.indexOf(substr[,startIndex])

str:表示字符串、字符串变量、字符串对象
substr：必选参数，表示要在字符串中查找的子字符串
startIndex：可选参数，表示从指定位置开始搜索，没有则从首字符开始搜索

<script>
			var str = 'JavaScript';
			console.log(str.indexOf('J'));
			console.log(str.indexOf('a'));
			console.log(str.indexOf('a',2));    //从索引为2的位置开始找
			console.log(str.indexOf('Java'));
</script>

lastIndexOf()

与indexOf()函数类似，区别是lastIndexOf()是从后往前搜索子字符串的，有则返回第一个字符的下标，否则返回-1

includes()

includes()函数用于查找子字符串，如果查找到子字符串则返回true，否则返回false

<script>
			var str = 'JavaScript';
			console.log(str.includes('J'));
			console.log(str.includes('a'));
			console.log(str.includes('a',2));
			console.log(str.includes('ab'));
</script>

提取部分字符串

slice()

slice()是指在指定起始位置到结束位置之间截取字符串，只包括起始位置的字符，不包括结束位置的字符

语法：

slice(startIndex[,endIndex])

str:表示字符串、字符串变量、字符串对象
startIndex:必选参数，表示截取字符串的起始位置，下标0表示第一个字符；如果是负数，则从倒数第startIndex个字符开始截取
endIndex:可选参数，表示截取字符串的结束位置；如果是负数，表示截取到倒数第endIndex个字符(不含该字符)；如果缺少该参数，则截取到最后一个字符

<script>
			var str = 'JavaScript';
			console.log(str.slice(3));
			console.log(str.slice(3,5));   //截取索引号3-4的字符
			console.log(str.slice(-3));   //从倒数第三个开始截取
			console.log(str.slice(-3,-1));  //从倒数第三个开始截取，截取到倒数第											//一个
</script>

substr()

substr()类似于slice()，不同之处在于第二个参数规定被提取部分的长度

语法：
	数组名.substr(参数1,参数2)
	
	参数1：为正值，则从前往后的索引号，为负值则是从后往前的位置号(-1为倒数第一个)
	参数2：为截取长度，不能为负，若省略，则从参数1的位置截取后续所有
<script>
			var str = 'JavaScript';
			console.log(str.substr(3,2));
			console.log(str.substr(3));
			console.log(str.substr(-1));
</script>

substring()

substring()是指在指定起始位置到结束位置之间截取字符串，只包括起始位置的字符，不包括结束位置的字符

语法：
	str.substring(startIndex [,endIndex])
	
	str:表示字符串、字符串变量、字符串对象
	startIndex：必选参数，表示截取字符串的起始位置
	endIndex：可选参数，表示截取字符串的结束位置。
	若startIndex或endIndex都不大于0，则将其当做0，若相等，则返回空字符串，若startIndex大于endIndex，则交换两个参数之后再截取，若缺少endIndex，则截取到最后一个字符
	
	<script>
			var str = "JavaScript";
			console.log(str.substring(3));		//从索引3到最后
			console.log(str.substring(3,3));	//返回空字符
			console.log(str.substring(3,5));	//索引3->索引4
			console.log(str.substring(-3));		//当做0
			console.log(str.substring(3,1));	//交换位置，1,3，索引1->索引2
    </script>

提取字符串字符

charAt()

charAt() 方法返回字符串中指定下标（位置）的字符串：

<script>
			var str = "JavaScript";
			console.log(str.charAt(0));
			console.log(str.charAt(4));
</script>

charCodeAt()

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

<script>
			var str = "JavaScript";
			console.log(str.charCodeAt(0));
			console.log(str.charCodeAt(4));
</script>

以数组的形式访问

JS允许直接对字符串以数组的形式访问，但实际并不是，而且它是只读的，不能修改

建议把字符串转换为数组

通过split()方法将字符串转换为数组

<script>
			<script>
			var str = "JavaScript";
			console.log(str[0]);
			console.log(str[5]);
			str[0] = "A";
			console.log(str[0]);
			str.split();
			console.log(JSON.stringify(str));
			console.log(str[0]);
			console.log(str[5]);
</script>

替换字符串

replace()

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

默认的地，replace()只替换首个匹配

<body>
	<p id="demo">“JavaScript”，“JavaScript”</p>
<script>
			var str = 'JavaScript JavaScript';
			var n = str.replace("JavaScript","JS");	   //只替换第一个匹配的字符串
			var m = str.replace("JAVASCRIPT","JS");     //replace大小写敏感
			var n1 = str.replace(/JAVASCRIPT/i,"JS");  //大小写不敏感的正则表达式
			console.log(n);
			console.log(m);
			console.log(n1);
			
			var str1 = document.getElementById("demo").innerHTML;
			var txt = str1.replace(/JavaScript/g,"JS");  //符合的字符串全部替换的															正则表达式
			console.log(txt);
</script>
</body>

转换为大小写

通过 toUpperCase() 把字符串转换为大写

通过 toLowerCase() 把字符串转换为小写

<body>
	<p id="demo">“JavaScript”，“JavaScript”</p>
	<script>
			var str = 'JavaScript JavaScript';
			var n = str.toUpperCase();
			console.log(n);
			
			var str1 = document.getElementById("demo").innerHTML;
			var txt = str1.toUpperCase();
			console.log(txt);
			
			var str1 = 'JAVASCRIPT JavaScript';
			var n1 = str.toLowerCase();
			console.log(n1);
			
			var str2 = document.getElementById("demo").innerHTML;
			var txt1 = str1.toLowerCase();
			console.log(txt1);
    </script>
</body>

连接字符串

+

可以使用 + 将两个字符串拼接成新的字符串

join

使用join([separator])函数将所有 数组元素 用分隔符(separator) 拼接成一个字符串，分隔符默认为逗号

<script>
		var J = 'Java';
		var S = 'Script'
		// + 方法拼接
		var courseName = J + S;
		document.write('拼接字符串：',courseName);
		// join 方法
		var stringList = [J,S];
		document.write('<pre>');
		document.write('join方法拼接：',stringList.join(''));
</script>

concat()

连接两个或多个字符串

<script>
			var text1 = "Hello";
			var text2 = "World";
			var text3 = text1.concat(" ",text2);	
			console.log(text3);
			
			var text = "Hello"+" "+"World!";		//直接相加，最方便	
			var text4 = "Hello".concat(" ","World!!");
			console.log(text);
			console.log(text4);
</script>

返回新的字符串，而不是改变原来的字符串

拆分字符串

split方法

语法：
	str.split([separator[,limit]])
	
参数说明：
	str:字符串/字符串变量/字符串对象
	separate：可选参数，表示拆分字符串时使用的分隔符；若该参数为空，则字符串分隔为单个字符；若缺少或字符串中不存在分隔符，则将整个字符作为数组的一个元素(即分隔的位置)
	limit：可选参数，表示最多拆分为多少个子字符串；若拆分后长度大于limit，则下标大于limit的元素全部丢弃，不返回剩余字符串；若缺少该参数，则全部拆分

<script>
		var str = 'JavaScript';
		document.write(JSON.stringify(str.split()));
		document.write('<pre>');
		document.write(JSON.stringify(str.split('a')));	//到a分隔
		document.write('<pre>');
		document.write(JSON.stringify(str.split('S',1))); //到S分隔，拆为1个字符串
		document.write('<pre>');
		document.write(JSON.stringify(str.split('')));	//空格，则全部拆分
</script>

删除字符串两端空白

trim()

trim() 方法删除字符串两端的空白符：

<script>
			var str = "       Hello World!        ";
			console.log(str);
			console.log(str.trim());
			
			var str = "       Hello World!        ";
			console.log(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
</script>

大小写转换

toLowerCase()

将str中的大写字符全部转换为小写字符，返回新字符串，不接收任何参数

语法：
	str.toLowerCase()
	
参数说明：
	str: 字符串/字符串变量/字符串对象

toUpperCase()

将str中的小写字符全部转换为大写字符，返回新字符串，不接收任何参数

语法：
	str.toUpperCase()
	
参数说明：
	str: 字符串/字符串变量/字符串对象

举例

<script>
		var str = 'JavaScript';
		document.write(str,'<br>');
		document.write(str.toLocaleLowerCase(),'<br>');
		document.write(str.toLocaleUpperCase());
</script>

拓展

声明多行字符串

老方法

// 使用\n跨行声明字符串量
<script>
		var str = 'Java\nScript\nJava\nScript';
		document.write(str,'<br>');
		console.log(str);
		var str1 = 'Java\
		Script';
		document.write(str1);
		console.log(str1);
</script>

新方法

ECMAScript 6 定义了模板字符串，允许在字符串中间直接插入换行符，且不需要使用转义字符。模板字符串使用反引号(``)作为字符串边界符。

<script>
		var str = `Java
		Script`;			
		document.write(str.length);

		document.write('<br><textarea>',str,'</textarea>');	//包含换行
		document.write('<br>');
		var str1 = `Java\
		Script`;			
		document.write(str1.length);
		document.write('<br><textarea>',str1,'</textarea>');	//不包含换行
</script>

变量插值

<script>
		var name = 'Hello,';
		
		var str = `${name}World`;		// ${name}
		
		document.write(str);
</script>