how2j.cn


工具版本兼容问题
与数字类似,基本类型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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
属性 length 返回字符串的长度
运行效果
<script> var y = new String("Hello JavaScript"); document.write("通过.length属性获取字符串'Hello JavaScript'的长度"+y.length); </script>
<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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
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>
<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>
<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>
<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>
<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>
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
字符串替换工具
<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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
2024-07-26 使用 正则表达式与replace 结合实现字符串完全替换方法
虚心求学




正则表达式可以这么写,不需要创建 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




含多函数分级使用、一个按钮实现多个逻辑
<!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
CharlieLong
答案时间:2023-10-31
答案!

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



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2022-04-25 练习
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

上传截图