JS入门到精通 第6章 字符串与数值数组
导读：一、练习1. 练习1 （1）源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>输出字符串</title> </head> <bod...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出字符串</title>
</head>
<body background="bg.jpeg">
<script type="text/javascript">
var arr=new Array("张无忌","郭靖","东方不败","乔峰","令狐冲","完颜洪烈","杨过","金轮法王","韦小宝");
var twoname="";
var threename="";
var fourname="";
for(var i=0; i<arr.length; i++){
if(arr[i].length==2){
twoname+=arr[i]+" ";
}
if(arr[i].length==3){//如果人物名称长度为3
threename+=arr[i]+" ";//将人物名称连接在一起
}
if(arr[i].length==4){//如果人物名称长度为4
fourname+=arr[i]+" ";//将人物名称连接在一起
}
}
document.write("二字人物："+twoname);//输出二字人物
document.write("<br>三字人物："+threename);//输出三字人物
document.write("<br>四字人物："+fourname);//输出四字人物
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_1/
（3）Tips
比较简单。
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>统计指定字符在字符串中的出现次数</title>
</head>
<body>
<script type="text/javascript">
var str="四是四，十是十，十四是十四，四十是四十";
var position=0;
var num=0;
var index=0;
while(position!=-1){
document.write("<br><br>index："+index);
position=str.indexOf("四",index);
document.write("<br>position："+position);
if(position==-1){break;}
num+=1;
document.write("<br>num："+num);
index=position+1;
//if(num==7){break;}
}
document.write("<br><br>定义的字符串："+str+"<br>");
document.write("字符串中有"+num+"个四");
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_2/
（3）Tips
position开始少写一个i，一直死循环，电脑都卡死了，后来一点点调试发现。我就不喜欢num从-1开始，好别扭，看不懂，我就要从0开始数。
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>截取显示字符串</title>
<style type="text/css">
.public{
width:202px;
height:182px;
background-image: url(images/bg.png);
background-repeat: no-repeat;
font-size: 12px;
color:#CC00FF;
padding-top:65px;
line-height:20px;
}
</style>
</head>
<body>
<script type="text/javascript">
var str1="明日科技即将重磅推出零基础学系列课程";
var str2="明日商城热烈欢迎新老朋友光临惠顾";//定义公告标题字符串
var str3="本网站所有商品让利销售欢迎订购";//定义公告标题字符串
var str4="所有电子商品一律5折销售";
function subStr(str){
if(str.length>10){
return str.substr(0,10)+"...";
}else{return str;}
}
</script>
<div>
<ul>
<script type="text/javascript">
document.write("<li>"+subStr(str1)+"</li>");
document.write("<li>"+subStr(str2)+"</li>");
document.write("<li>"+subStr(str3)+"</li>");
document.write("<li>"+subStr(str4)+"</li>");
</script>
</ul>
</div>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_3/
（3）Tips
原来这样实现。
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出表格</title>
<style type="text/css">
table{
font-size:14px;
color:#0000FF;}
th{
font-size:16px;
color:#FF00FF}
</style>
</head>
<body>
<table cellspacing="1" bgcolor="#999999">
<tr height="30" bgcolor="#FFFFFF">
<th width="100">人物名称</th>
<th width="100">人物绰号</th>
<th width="160">主要事迹</th>
</tr>
<script type="text/javascript">
var name="宋江，卢俊义，林冲，鲁智深，武松";
var nickname="及时雨，玉麒麟，豹子头，花和尚，行者";
var story="领导梁山起义，活捉史文恭，风雪山神庙，倒拔垂杨柳，醉打蒋门神";
var nameArray=name.split("，");
var nicknameArray=nickname.split("，");
var storyArray=story.split("，");
for(var i=0;i<nameArray.length;i++){
document.write("<tr height=26 bgcolor='#FFFFFF'>");
document.write("<td>"+nameArray[i]+"</td>");
document.write("<td>"+nicknameArray[i]+"</td>");
document.write("<td>"+storyArray[i]+"</td>");
document.write("</tr>");
}
</script>
</table>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_4/
（3）Tips
非要那么别扭，讨厌，非要给你纠正过来。
5. 练习5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成指定位数的随机数</title>
</head>
<body>
<script type="text/javascript">
function ran(digit){
var result="";
for(i=1;i<=digit;i++){
result+=Math.floor(Math.random()*10);
}
alert(result);
}
</script>
<form>
<p>请输入要生成随机数的位数：<input type="text" name="digit" /></p>
<input type="button" value="生成" onClick="ran(form.digit.value)" />
</form>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_5/
（3）Tips
其实是字符串的叠加。
二、编程训练
1. 训练1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组转字符串</title>
</head>
<body>
<script type="text/javascript">
var arr=new Array("《明史讲义》","《明代社会生活史》","《紫禁城的黄昏》","《国史十六讲》","《停滞的帝国》","《唐朝定居指南》","《明史简述》","《明史十讲》","《大明风物志》","《皇帝与秀才》");
var newarr=new Array();
var j=0;
for(var i=0;i<arr.length;i++){
if(arr[i].length==6){
newarr[j]=arr[i];
j++;
}
}
document.write("书名为4个字的书籍："+newarr.join(" "));
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_6/
（3）Tips
数组成员连接join。
2 训练2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>indexOf函数</title>
</head>
<body>
<script type="text/javascript">
var telArr=new Array("1385566****","1560431****","1304316****","1516369****","1580433****","139****0431");
var telStr="";
for(var i=0;i<telArr.length;i++){
if(telArr[i].indexOf("0431")!=-1){
document.write("第"+(i+1)+"个元素，值为："+telArr[i]+"，索引值为："+telArr[i].indexOf("0431")+"<br>");
telStr+=telArr[i]+"<br>";
}
}
document.write("</p>通讯录中含有0431的手机号码如下：</p>"+telStr);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_7/
（3）Tips
有话不会说，一群蠢货。
3 训练3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var email="4006751066@qq.com";
var jiequshuzi=parseInt(email);
document.write("截取数字："+jiequshuzi);
document.write("直接数字长度："+jiequshuzi);
var zhuanzifuchuan=jiequshuzi.toString();
document.write("<br>转换成字符串："+zhuanzifuchuan);
var length=zhuanzifuchuan.length;
document.write("<br>数字长度："+length);
var QQ=email.substr(0,length);
document.write("<br>该邮箱地址中的QQ号为"+QQ);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_8/
（3）Tips
就是要证明，你们不对！这种方式不对不对不对！太差了！怎么能懂？
4.训练4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟掷骰子</title>
</head>
<body>
<script type="text/javascript">
function ran(digit){
var result="";
for(i=1;i<=digit;i++){
result+=Math.floor(Math.random()*6)+1
}
alert(result);
}
ran(6);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_9/
（3）Tips
ai帮大忙，享受调试的过程吗？
5.训练5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件求数值</title>
</head>
<body>
<h3>6的倍数，个位数加上十位数等于百位数的三位数</h3>
<script type="text/javascript">
for(var i=100; i<=999; i++){
if(i%6==0 && Math.floor(i/100)==Math.floor(i%100/10)+Math.floor(i%100%10)){
document.write(i+" ");
}
}
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_10/
（3）Tips
位数这样表示的。
三、实践与练习
1. 实践1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>判断字符串条件</title>
</head>
<body>
<script type="text/javascript">
function check(email){
var index1=email.indexOf("@");
var index2=email.indexOf(".");
if(index1>0 && index2-index1>1 && index2<email.length-1){
result="注册邮箱符合要求！";
}else{result="注册邮箱格式不正确！";}
return result;
}
alert(check("abc@sina.c"));
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_11/
（3）Tips
很不严谨，只为indexOf。
2. 实践2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串和数组之间转换</title>
</head>
<body>
<script type="text/javascript">
function ranStr(digit){
var sourceStr="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G";
var arrStr=sourceStr.split(",");
var result="";
var index=0;
for(i=0;i<digit;i++){
index=parseInt(Math.random()*arrStr.length);
result+=arrStr[index];
}
alert(result);
}
ranStr(8);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_12/
（3）Tips
都是数学表达式。
3. 实践3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字用千分号表示</title>
</head>
<body>
<script type="text/javascript">
function convert(num){
var result=0;
var dec="";
var res=0;
document.write("传进来的是什么："+num);
document.write("<br>isNaN怎么会是空："+isNaN(num));
if(isNaN(num)){
result=0;
}else{
document.write("<br>只能是字符串？："+num.length);
if(num.length<=3){
result=num;
document.write("<br>这里是多少："+result);
}else{
pos=num.indexOf(".",1);
document.write("<br>有没有小数点："+pos);
if (pos>0){
dec=num.substr(pos);
document.write("<br>有没有小数点："+dec);
res=num.substr(0,pos);
document.write("<br>分割出去了吗？："+res);
}else{
res=num;
document.write("<br>本来就是整数："+res);
}
var zhengshubufen="";
for(var i=res.length;i>0;i-=3){
document.write("<br><br>第"+i+"次循环");
document.write("<br>i现在是几？："+(i-3));
document.write("<br>每回取3个数？："+res.substr(i-3,3));
if(i-3>0){
zhengshubufen=","+res.substr(i-3,3)+zhengshubufen;
}else{
zhengshubufen=res.substr(0,i)+zhengshubufen;
}
document.write("<br>每回循环值："+zhengshubufen);
}
result=zhengshubufen+dec;
}
}
return result;
}
var number=987654321.22;
document.write("<br><br>输出："+convert(number.toString()));
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/6_13/
（3）Tips
我得知道怎么来的吧！