JavaScript系列教材（二十）- 对象 - javascript 字符串对象详解

JavaScript系列教材（十九）- 对象 - javascript 数字对象详解

JavaScript系列教材（二十一）- 对象 - javascript 数组对象详解

工具版本兼容问题

与数字类似，基本类型String也有一个对应的String 对象，并且提供了很多有用的方法。

纠

关键字	简介	示例代码
new String()	创建字符串对象	示例代码
属性 length	字符串长度	示例代码
方法 charAt charCodeAt	返回指定位置的字符	示例代码
方法 concat	字符串拼接	示例代码
方法 indexOf lastIndexOf	子字符串出现的位置	示例代码
方法 localeCompare	比较两段字符串是否相同	示例代码
方法 substring	截取一段子字符串	示例代码
方法 split	根据分隔符，把字符串转换为数组	示例代码
方法 replace	替换子字符串	示例代码
方法 charAt 方法 concat 方法 substring	返回基本类型	示例代码
	练习	示例代码
	答案	示例代码

示例 1 : 创建字符串对象
示例 2 : 字符串长度
示例 3 : 返回指定位置的字符
示例 4 : 字符串拼接
示例 5 : 子字符串出现的位置
示例 6 : 比较两段字符串是否相同
示例 7 : 截取一段子字符串
示例 8 : 根据分隔符，把字符串转换为数组
示例 9 : 替换子字符串
示例 10 : 返回基本类型
示例 11 : 练习
示例 12 : 答案

示例 1 :

创建字符串对象

edit 顶折

纠问

与Number类似的，可以通过new String()创建一个String对象

运行效果

<script>

var x = "5";
var y = new String(x);
document.write("变量x的值是:"+x);
document.write("<br>");
document.write("变量x的类型是:"+(typeof x));
document.write("<br>");
document.write("变量y的值是:"+y);
document.write("<br>");
document.write("变量y的类型是:"+(typeof y));
document.write("<br>");
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

字符串长度

edit 顶折

纠问

属性 length 返回字符串的长度

运行效果

<script>

var y = new String("Hello JavaScript");

document.write("通过.length属性获取字符串'Hello JavaScript'的长度"+y.length);

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

返回指定位置的字符

edit 顶折

纠问

charAt 返回指定位置的字符
charCodeAt 返回指定位置的字符对应的Unicode码

运行效果

<script>
 
var y = new String("Hello JavaScrpt");
document.write("字符串y的值:"+y);
document.write("<br>"); 
document.write('通过 charAt(0)获取位置0的字符串： '+y.charAt(0)); //返回H
document.write("<br>");
document.write('通过 charCodeAt(0)获取位置0的字符的 Unicode码 ：'+y.charCodeAt(0)); //返回H对应的Unicode码 72

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

字符串拼接

edit 顶折

纠问

concat用于进行字符串拼接

运行效果

<script>

var x = new String("Hello "); 
var y = new String("Javascript");

document.write( '字符串x的值: '+x); 
document.write('<br>');
document.write( '字符串y的值: '+y); 
document.write('<br>');
document.write( '通过函数concat()把x和y连接起来: ' +  x.concat(y) ); 

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

子字符串出现的位置

edit 顶折

纠问

indexOf 返回子字符串第一次出现的位置
lastIndexOf 返回子字符串最后一次出现的位置

运行效果

<script>
  
var y = new String("Hello JavaScript");
document.write( '字符串y的值: '+y); 
document.write('<br>');
document.write('通过 indexOf ("a")获取子字符"a" 第一次出现的位置 '+y.indexOf ("a")); 
document.write('<br>');
document.write('通过 lastIndexOf ("a")获取子字符"a" 最后出现的位置 '+y.lastIndexOf ("a")); 
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

比较两段字符串是否相同

edit 顶折

纠问

localeCompare 比较两段字符串是否相同，0即表示相同，非0表示不同

运行效果

代码行数较多，请点击查看

<script>
  
var x = new String("Hello");
var y = new String("Hello");
var z = new String("aloha");
  
document.write( '字符串x的值: '+x); 
document.write('<br>');
document.write( '字符串y的值: '+y); 
document.write('<br>');
document.write( '字符串z的值: '+z); 
document.write('<br>');

document.write('通过 localeCompare()判断 x和y是否相等 '+x.localeCompare(y));
document.write('<br>');
document.write('通过 localeCompare()判断 x和z是否相等 '+x.localeCompare(z));
document.write('<br>');

document.write('0 表示相等<br>');
document.write('1 表示字母顺序靠后<br>');
document.write('-1 表示字母顺序靠前<br>');

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

截取一段子字符串

edit 顶折

纠问

substring 截取一段子字符串
注：第二个参数，取不到

运行效果

<script>
  
var x = new String("Hello JavaScript");
 document.write( '字符串x的值: '+x); 
document.write('<br>');
document.write('x.substring (0,3) 获取位0到3的字符串： '+x.substring (0,3) ); 
document.write('<br>');
document.write('左闭右开，取得到0，取不到3');

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

根据分隔符，把字符串转换为数组

edit 顶折

纠问

split 根据分隔符，把字符串转换为数组。
注：第二个参数可选，表示返回数组的长度

运行效果

<script>
var x = new String("Hello This Is JavaScript");
document.write( '字符串x的值: '+x); 
document.write('<br>');

var y =  x.split(" ");
document.write('通过空格分隔split(" "),得到数组'+y); 
document.write("<br>");

var z =  x.split(" ",2);
document.write('通过空格分隔split(" ",2),得到数组，并且只保留前两个'+z); 
 
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 9 :

替换子字符串

edit 顶折

纠问

replace(search,replacement)
找到满足条件的子字符串search，替换为replacement

注: 默认情况下只替换找到的第一个子字符串，如果要所有都替换，需要写成：

x.replace(/a/g, "o");
或者
var regS = new RegExp("a","g");
x.replace(regS, "o");

运行效果

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var x = new String("Hello JavaScript");
p('这个是原字符串: '+x);
var y = x.replace("a","o");
p('只替换第一个 a:  '+y);
var regS = new RegExp("a","g");
var z = x.replace(regS, "o");
p('替换掉所有的 a:  '+z);

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 10 :

返回基本类型

edit 顶折

纠问

需要注意的是，所有返回字符串类型的方法，返回的都是基本类型的String

运行效果

代码行数较多，请点击查看

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

var x = new String("Hello JavaScript");

var temp = x.charAt(0);
p('charAt返回的值'+temp);
p('其类型是'+ typeof temp );

var temp = x.concat("!!!");
p('concat返回的值'+temp);
p('其类型是'+ typeof temp );

var temp = x.substring(0,5);
p('substring返回的值'+temp);
p('其类型是'+ typeof temp );

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 11 :

练习

edit 顶折

纠问

姿势不对,事倍功半! 点击查看做练习的正确姿势

字符串替换工具

代码行数较多，请点击查看

<script>
function getValue(id){
   return document.getElementById(id).value;
}
function setValue(id,value){
   document.getElementById(id).value=value;
}
function replace(){
 
  var src = getValue("src")
 
  var search = getValue("search")
  var replace = getValue("replace")
  var regS = new RegExp(search,"g");
  var result = src.replace(regS, replace);
  setValue("result",result);
}
 
</script>
<table>
<tr>
  <td>源字符串:</td>
  <td><textarea id="src">example</textarea></td>
</tr>
<tr>
  <td>查询:</td>
  <td><input type="text"  id="search" value="a" ></td>
</tr>
<tr>
  <td>替换为:</td>
  <td><input type="text"  id="replace" value="e" ></td>
</tr>
<tr>
  <td>替换结果：</td>
  <td><textarea id="result"></textarea></td>
</tr>
<tr>
  <td colspan="2" align="center"><button onclick="replace()">替换</button></td>
  <td></td>
</tr>
</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 12 :

答案

edit 顶折

纠问

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

查看本答案会花费3个积分，您目前总共有点积分。查看相同答案不会花费额外积分。积分增加办法

账号未激活账号未激活，功能受限。请点击激活

运行效果

代码行数较多，请点击查看

<script>
function getValue(id){
   return document.getElementById(id).value;
}
function setValue(id,value){
   document.getElementById(id).value=value;
}
function replace(){

  var src = getValue("src")

  var search = getValue("search")
  var replace = getValue("replace")
  var regS = new RegExp(search,"g");
  var result = src.replace(regS, replace);
  setValue("result",result);
}

</script>
<table>
<tr>
  <td>源字符串:</td>
  <td><textarea id="src">example</textarea></td>
</tr>
<tr>
  <td>查询:</td>
  <td><input type="text"  id="search" value="a" ></td>
</tr>
<tr>
  <td>替换为:</td>
  <td><input type="text"  id="replace" value="e" ></td>
</tr>
<tr>
  <td>替换结果：</td>
  <td><textarea id="result"></textarea></td>
</tr>
<tr>
  <td colspan="2" align="center"><button onclick="replace()">替换</button></td>
  <td></td>
</tr>
</table>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

JavaScript系列教材（十九）- 对象 - javascript 数字对象详解

JavaScript系列教材（二十一）- 对象 - javascript 数组对象详解

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-07-26 使用正则表达式与replace 结合实现字符串完全替换方法

虚心求学

关于前端部分-JavaScript-字符串的提问

正则表达式可以这么写，不需要创建 RegExp 对象。 .replace(/{name}/g, boss) /开始 /结束是一个完整的正则表达式，然后 g 表示全局匹配

<script>
function get(id){
	var element = document.getElementById(id);
	return element ;
}

function set(id,value){
	get(id).value=value;
}  
  
function replace(str,src,dest){
  var s =  new String(str);
  var reg =  new RegExp(src,"g");
  return s.replace(reg,dest);
}

function replaceInput(){
	var s1 = get('str').value;
  	var src = get('src').value;
  	var dest = get('dest').value;
  	var res = replace(s1,src,dest);
  	set('res',res);
}
</script>

<table>
<tr>
<td>源字符串：</td>
<td><input id="str"></td>
</tr>
  <tr>
<td>查询：</td>
<td><input id="src"></td>
</tr>
  <tr>
<td>替换为：</td>
<td><input id="dest"></td>
</tr>
    <tr>
<td>结果：</td>
<td><input id="res"></td>
</tr>
<tr>
<td colspan="2" style="text-align:center"><button onclick="replaceInput()">替换</button></td>
</tr>
</table>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-09-02 答案

lishijing123456

关于前端部分-JavaScript-字符串的提问

含多函数分级使用、一个按钮实现多个逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串替换工具</title>
</head>
<body>
<style>
table{
}
td{
  border:1px silver ;
  padding: 5px;
  font-size:12px;
}
input{
  width:120px;
}
 c{
 margin-left:150px ;
        }
</style>
<script>
function num1(){return document.getElementById("t1").value;}
function num2(){return document.getElementById("t2").value;}
function num3(){return document.getElementById("t3").value;}

  function r2(){
  var regs=new RegExp(num2(),"g");
  var x=num1().replace(regs,num3());
  return x;
  }
  function r1(){
  var y = num1().replace(num2(),num3());
  return y;
   }
   function replace1(){
    document.getElementById("t5").value=r1();
    document.getElementById("t4").value=r2();
  }

</script>
<table>
  <tr>
    <td>源字符串：</td>
    <td><textarea id="t1"></textarea></td>
  </tr>
    <td>查询：</td>
    <td><input type="text" id="t2"/></td>
  </tr>
  <tr>
    <td>替换为：</td>
    <td><input type="text" id="t3" /></td>
  </tr>

  <tr>
    <td>替换首字母：</td>
    <td><textarea id="t5"></textarea></td>
  </tr>
  <tr>
    <td>替换全部：</td>
    <td><textarea id="t4"></textarea></td>
  </tr>
   </table>
<button class="c" onclick="replace1()">替换</button>

</body>
</html>

3 个答案

Leslie_sakura
答案时间：2024-04-14

代码超过 5行，点击查看

CharlieLong
答案时间：2023-10-31

答案！

代码超过 5行，点击查看

54Mozu
答案时间：2022-12-09

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-04-25 练习

lusir_666

关于前端部分-JavaScript-字符串的提问

小发一下~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
		/* var a=new String("hello javascript");
		var regs=RegExp("a","g");
		var x=a.replace(regs,"e");
		document.write(x); */
		function replace(){
			var a1=new String(document.getElementById('t1').value);
			var a2=new String(document.getElementById('t2').value);
			var a3=new String(document.getElementById('t3').value);
			/* var a4=new String(document.getElementById('t4').value); */
			var regs=new RegExp(a2,"g");
			var x=a1.replace(regs,a3);
			document.getElementById("t4").value=x;
		}
	</script>
	<style>
		.c{
			margin-left:150px ;
		}
	</style>
	<body>
		<table>
			<tr>
				<td>源字符串：</td>
				<td><textarea id="t1"></textarea></td>
			</tr>
			<tr>
				<td>查询：</td>
				<td><input type="text" id="t2"/></td>
			</tr>
			<tr>
				<td>替换为：</td>
				<td><input type="text" id="t3"/></td>
			</tr>
			<tr>
				<td>替换结果：</td>
				<td><textarea id="t4"></textarea></td>
			</tr>
		</table>
		<button class="c" onclick="replace()">替换</button>
	</body>
</html>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-04-07 练习-exercise11

2021-04-20 为什么可以直接用变量调用函数.replace()

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 31 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-JavaScript-字符串的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图