字符串
字符串的创建
字符串 (String) 对象是JavaScript原生三大包装对象之一，用来生成字符串对象。
var str = "hello world"; //常量，基本类型创建
var str2 = new String("hello world"); //构造函数创建
字符串的属性：
str.length //字符串的长度
字符串实例方法之常用API
1、 String.charAt()
charAt方法返回指定位置的字符，参数是从0开始编号的位置。
var str = "hello,world";
console.log(str.charAt(1)); // e
2、String.indexOf(data,start);
indexOf方法用于返回某个数组或者字符串中规定字符或者字符串的位置
var str = "abcdefg”;
str.indexOf("a"); //0 返回当前查询字符所在的位置的下标，如无，返回-1，start表示从第几位开始查询
indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。
'hello world'.indexOf('o', 6) // 7
3、String.lastIndexOf(data,start)
lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。
'hello world'.lastIndexOf('o') // 7
另外，lastIndexOf的第二个参数表示从该位置起向前匹配。
'hello world'.lastIndexOf('o', 6) // 4
4、String.slice()
slice方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。
var str="JavaScript"
str.slice(0, 4) // "Java"
如果省略第二个参数，则表示子字符串一直到原字符串结束。
var str="JavaScript"
str.slice(4) // "Script"
如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。
var str="JavaScript"
str.slice(-6) // "Script"
str.slice(0, -6) // "Java"
str.slice(-2, -1) // "p"
如果第一个参数大于第二个参数，slice方法返回一个空字符串。
"JavaScript".slice(2, 1) // ""
5、String.substring()
substring方法用于从原字符串截取子字符串并返回，不改变原字符串，跟slice方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。
"JavaScript".substring(0, 4) // "Java"
如果省略第二个参数，则表示子字符串一直到原字符串的结束。
"JavaScript".substring(4) // "Script"
如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置。
"JavaScript".substring(10, 4) // "Script"
// 等同于
"JavaScript".substring(4, 10) // "Script"
上面代码中，调换substring方法的两个参数，都得到同样的结果。
如果参数是负数，substring方法会自动将负数转为0。
"JavaScript".substring(-3) // "JavaScript"
"JavaScript".substring(4, -3) // "Java"
6、String.split("-");
split方法通过指定字符分割字符串，返回一个数组
var str = "hello world";
console.log(str.split()) // ["hello world"]
console.log(str.split("")) //["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
console.log(str.split("o")) //["hell", " w", "rld"]
7、String.replace（）;
replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。
"aaa".replace('a', 'b') // "baa"
8、String.concat()
concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串。
var a1 = 'abc';
var a2 = 'def';
a1.concat(s2) // "abcdef"
a1 // "abc"
该方法可以接受多个参数。
''a''.concat(''b'', ''c'') // "abc"
如果参数不是字符串，concat方法会将其先转为字符串，然后再连接。
var one = 1;
var two = 2;
var three = '3';
''.concat(one, two, three) // "123"
one + two + three // "33"
上面代码中，concat方法将参数先转成字符串再连接，所以返回的是一个三个字符的字符串。作为对比，加号运算符在两个运算数都是数值时，不会转换类型，所以返回的是一个两个字符的字符串。
9、String.charCodeAt()
charCodeAt方法返回字符串指定位置的 Unicode 码点（十进制表示），相当于String.fromCharCode()的逆操作。
''abc''.charCodeAt(1) // 98
上面代码中，abc的1号位置的字符是b，它的 Unicode 码点是98。
如果没有任何参数，charCodeAt返回首字符的 Unicode 码点。
''abc''.charCodeAt() // 97
如果参数为负数，或大于等于字符串的长度，charCodeAt返回NaN。
''abc''.charCodeAt(-1) // NaN
''abc''.charCodeAt(4) // NaN
注意，charCodeAt方法返回的 Unicode 码点不会大于65536（0xFFFF），也就是说，只返回两个字节的字符的码点。如果遇到码点大于 65536 的字符（四个字节的字符），必需连续使用两次charCodeAt，不仅读入charCodeAt(i)，还要读入charCodeAt(i+1)，将两个值放在一起，才能得到准确的字符。
10、String.fromCharCode()
String的意思就是不能用自己定义的字符串名字来调用，只能用String来定义调用。接受一个或多个指定的Unicode值，然后返回一个或多个字符串。(把unicode编码转换为字符串)。
var str = "中国";
console.log(String.fromCharCode("0x4E2D")) //中
console.log(String.fromCharCode(20013))
还有很多字符方法我就不一一列举了，可以参照下面的链接
http://www.w3school.com.cn/jsref/jsref_obj_string.asp
字符串的案例
js的重要作用之一－－－－交互－－－－人机交互（事件）－－－－服务器交互（ajax）
服务器交互，从服务器获取数据，数据的处理方式，将json－－－－转换成字符串操作。
字符串操作重要性不言而喻！
字符串的操作：从1+1=2到1+1=11，有什么样的区别
案例：商品列表
首先，我们可以先看下效果
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品列表</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 1200px;
overflow: auto;
margin: 200px auto;
border:1px solid pink;
}
#box div{
width: 300px;
height: 300px;
box-sizing: border-box;
border:1px solid red;
text-align: center;
overflow: hidden;
float:left;
}
#box div h3{
color: red;
font-size: 20px;
line-height: 40px;
padding-top: 20px;
}
#box div img{
width: 160px;
height: 160px;
}
#box div span{
font-size: 18px;
color: #ccc;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="box">
<p>抱歉，商品已售空。感谢您的光顾。</p>
</div>
</body>
<script>
var data =[{
img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beee478168e5c4fd0d66369386fddbbe.jpg?thumb=1&w=250&h=250&f=webp&q=90",
name:"Redmi K20 Pro 6GB+128GB",
price:"2229元"
},{
img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ce61b71e2f81df62bd0c05aaa901d22.jpg?thumb=1&w=250&h=250&f=webp&q=90 ",
name:"Redmi Note 7 ",
price:"1199元"
},{
img:"https:cdn.cnbj1.fds.api.mi-img.com/mi-mall/a7f616f2e931d6433f36fb356693c3d1.jpg?thumb=1&w=250&h=250&f=webp&q=90",
name:"小米9 王源限量版",
price:"3599元"
},{
img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/411d540271f6efbdd882fa33daee0de3.jpg?thumb=1&w=250&h=250&f=webp&q=90",
name:"小米MIX 3 8GB+128GB",
price:"2559元"
},{
img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beee478168e5c4fd0d66369386fddbbe.jpg?thumb=1&w=250&h=250&f=webp&q=90",
name:"Redmi K20 Pro 6GB+128GB",
price:"2229元"
},{
img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ce61b71e2f81df62bd0c05aaa901d22.jpg?thumb=1&w=250&h=250&f=webp&q=90 ",
name:"Redmi Note 7 ",
price:"1199元"
},{
img:"https:cdn.cnbj1.fds.api.mi-img.com/mi-mall/a7f616f2e931d6433f36fb356693c3d1.jpg?thumb=1&w=250&h=250&f=webp&q=90",
name:"小米9 王源限量版",
price:"3599元"
},{
img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/411d540271f6efbdd882fa33daee0de3.jpg?thumb=1&w=250&h=250&f=webp&q=90",
name:"小米MIX 3 8GB+128GB",
price:"2559元"
}];
// console.log(data);
var obox = document.getElementById("box");
var str="";
for(var i=0;i<data.length;i++){
str += '<div><img src="'+data[i].img+'" alt=""><h3>'+data[i].name+'</h3><span>'+data[i].price+'</span></div>'
}
// console.log(str);
obox.innerHTML = str;
</script>
</html>
扫一扫
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
