澳门新葡萄京www27111com


工具版本兼容问题
与数字类似,基本类型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 :

创建字符串对象

与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>
 澳门新葡萄京www27111com www.prowz.com <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 :

字符串长度

属性 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 :

返回指定位置的字符

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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

字符串拼接

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 :

子字符串出现的位置

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 :

比较两段字符串是否相同

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 :

截取一段子字符串

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 :

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

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 :

替换子字符串

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 :

返回基本类型

需要注意的是,所有返回字符串类型的方法,返回的都是基本类型的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 :

练习

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
字符串替换工具
<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 :

答案

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-03-09 这里的id必须是 src search replace 吗
哥哥好胤哦
好想不可以用别的,为什么呢,id难道不是自定义的吗.








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-01-30 请问,split(" ")与split("")的区别 ?
unshin



见代码
<script>
var x = new String("JavaScript");
document.write( x); 
document.write('<br>');

var y =  x.split(" ");
document.write(y);   // JavaScript
document.write("<br>");

var z =  x.split("");
document.write(z);   // J,a,v,a,S,c,r,i,p,t
</script>

							


1 个答案

米粒 答案时间:2018-02-08
split("") 将字符串分解成 (每个字符串含有单个字符的)字符串数组。(可以理解成分解成字母)。 split(" ") 根据字符" " (空格) 将字符串分解成字符串数组。("hello world ni hao" 将被分解成"hello","world","ni","hao" )(可以理解成单词)




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-09-10 这是正则表达式吗
2017-09-10 示例六
2017-09-09 var src = getValue("src")中src是基本string类型,为什么可以直接用var result = src.replace(regS, replace);
2017-09-09 var src = getValue("src")中src是string类型,为什么可以直接用var result = src.replace(regS, replace);
2017-08-08 替换子字符串的第一种方法,来实现这个练习
2017-05-10 替换子字符串中的疑问
2017-05-03 为什么.length返回长度和我数出来不一样
2016-06-29 注释有疑问




提问之前请登陆
关于 前端基础-JavaScript-字符串 的提问

尽量提供截图、代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图