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 :

创建字符串对象

与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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 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-08-16 用jquery写的作业
011220aadamnit



jquery对象.val(),这个传入val内的数据类型可以是?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>字符串替换工具</div>
<br>
<div>源字符串:<textarea name="" id="input1" cols="30" rows="1"></textarea></div>
<div>查询子字符串:<input type="text" id="input2"></div>
<div>替换为:<input type="text" id="input3"></div>
<div>替换结果:<textarea name="" id="output1" cols="30" rows="1"></textarea></div>
<button id="btn">替换</button>

<script>
    $(function(){
        //提供一个repalceAll函数,思考的是,传参的数据类型与后面调用时候的实参数据类型:由于js是弱类型语言,传参无法声明数据类型,后面调用该函数传入的是基本类型string
        function replaceAll(source,sub,rep,){
            //先试下只替换第一个子字符串
            // return source.replace(sub,rep)
            //将子字符串全部替换
            var regs=new RegExp(sub,"g");
            return source.replace(regs,rep)
        }
        $('#btn').click(function(){
            //获得用户输出的3个框内容,返回基本类型string
            var input1=$('#input1').val();
            var input2=$('#input2').val();
            var input3=$('#input3').val();
            console.log(typeof input1);
            $('#output1').val(replaceAll(input1,input2,input3));
        })
    })
</script>
</body>
</html>

							






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





2018-08-07 交作业
神乐



作业
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
	function get(){
		var str=document.getElementById("a1").value;
		var finds=document.getElementById("a2").value;
		var wtf=document.getElementById("a3").value;
		var strings=new String();
		for(var i=0;i<str.length;i+=finds.length){
			var s=str.substring(i,i+finds.length);
			if(!s.localeCompare(finds)){
				strings=strings.concat(wtf);
			}else{
				strings=strings.concat(s);
			}
		}
		document.getElementById("a4").value=strings;
	}
</script>
</head>

<body>
<table>
	<tr>
    <td>源字符串:</td>
    <td><input type="text" id="a1" /></td>
    </tr>
    <tr>
    <td>查询字符:</td>
    <td><input type="text" id="a2" /></td>
    </tr>
    <tr>
    <td>替换字符:</td>
    <td><input type="text" id="a3" /></td>
    </tr>
    <tr>
    <td>替换后为:</td>
    <td><input type="text" id="a4" /></td>
    </tr>
    <tr align="center">
    <td colspan="2"><input type="button" value="替换" style="width:80px;" onclick="get();"/></td>
    </tr>
</table>
</body>
</html>

							






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





2018-07-23 正则表达式疑问
2018-06-18 练习题
2018-04-25 站长大人,是不是当基本数据类型的变量调用方法的时候会自动变成对象类型啊?
2018-03-09 这里的id必须是 src search replace 吗
2018-01-30 请问,split(" ")与split("")的区别 ?
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群交流: 620943819
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图