JavaScript对象编程(六)
补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来。
一、初识String对象
1.什么是String对象
String 对象用于存储和处理文本(字符串),字符串可以使用单引号或双引号,单引号里可以嵌套双引号,双引号里也可以嵌套单引号,但是单引号中不能嵌套单引号,双引号中不能嵌套双引号。
2.创建String对象
- var str = new String( 'Hello World ’ )
- String(s); 参数 s 是要存储在 String 对象中 或 转换成原始字符串的值。
上图这个例子就是通过String()将参数s转化为原始字符串。
var a = ' hello '
var b = new String( ' hello ' )
typeof a // string
typeof b // object
这里还有一个小细节,通常情况来说只有对象才有属性和方法,但是在js中字符串也有属性和方法,当然这是通过JS内部自动转换完成的。
3.String对象访问
str.length可以得到字符串的长度
- 使用[](索引)访问字符串
var s=“qaz123”
consolo.log(s[2]) //返回 a
- 使用charAt()访问字符串(区别于第一种方式)
var s=“qaz123”
console.log(typeof(s[10])) // 返回undefined
console.log(typeof(s.charAt(10))) //返回string
补充:字符串的不可变性;在 JavaScript 中,字符串的值是不可变的,这意味着一旦字符串被创建就不能被改变。
var a = '123'
a[0] = '0'
console.log(a) //'123'
虽然无法改变字符串,但是可以重新赋值
var a = '123'
a ='023'
console. log( a) /l'023'
二、String对象的方法
1.replace()修改String对象
原始数据类型的字符串无法修改,但可以使用String对象的replace()方法进行修改,不会改变原String对象
注意:replace无法修改原字符串,只是返回一个新字符串
① 使用格式:str.replace(需要修改的字符 , 替换后的字符)
② 举例说明:
var a = '123'
var b = a.replace( '1' , '0') // a的值仍为'123 ',b的值为'023'
//替换的值可以为空
var a = '123'
var b = a.replace( '1' , '') // b的值为'23'
//可以对多个字符进行操作
var a = '123456'
var b = a.replace( '123' , '0123') // b的值为'0123456'
2.split()分割String对象
传入一个分隔符作为参数,以该分隔符为标准,将字符串进行分割并存入一个新数组并返回,不会改变原String对象
① 使用格式:str.split(分隔符 , [ 分割后数组的最大长度 ] )
补充:[中括号括起来的表示可选参数]
② 举例说明:
1、一个参数
var a = '2021-4-6'
var b = a.split( '-' ) //b: [ '2021 ' , '4' , '6' ], a: ' 2021-4-6'
2、两个参数
var a = '2021-4-6'
var b = a.split( '-',2 ) // b: [ '2021' , '4']
3、特殊分隔
var a = '-2021-4-6-'
var b = a.split( '-') / /b: [ ' ' , '2021' , '4' , '6 ' ,'']
4、分隔符为空
var a = '123'
var b = a.split( ' ' ) / /b: [ 'l' , '2 ' , '3']
var a = 'Hello world '
var b = a.split(' ' ) //b : [ ' Hello ' , ' world ' ]
小练习:颠倒字符串“123456”的值,输出“654321”
思路:通过分割字符串变为数组后,在调用数组的反序方法,最后无缝衔接即可。
function reverseStr(str) {
return str.split('').reverse().join('')
}
3.indexOf()查找字符
indexOf() 返回要查找的字符第一次出现的位置下标,若未找到返回-1
① 使用格式:str.indexOf(需要查找的字符)
② 举例说明:
var str = '1234567'
str.index0f('3') //返回 2
str.index0f('8') //返回-1
4.toLowerCase()转为小写
toLowerCase()把字符串转为小写,不会修改原字符串。
① 使用格式:str.toLowerCase()
② 举例说明:
var a = 'ABC'
var b = a.toLowerCase() / / b : "abc " , a: "ABC"
5.toUpperCase()转为大写
toUpperCase()把字符串转为大写,不会修改原字符串。
① 使用格式:str.toUpperCase()
② 举例说明:
var a = 'abc '
var b = a.toUpperCase() / / b : "ABC", a : "abc "
6.trim() 移除空白符
trim() 移除空白符(空格、制表符、换行符等),只对头尾操作,不会修改原字符串
① 使用格式:str.trim()
② 举例说明:
var a = ' a b c '
var b = a.trim() // b: 'a b c', a: ' a b c '
7.截取String对象
- slice()
slice() 截取字符串,与数组的slice方法相同《响应式网页设计之数组的方法》
① 使用格式:str.slice(开始位置索引值 , [ 结束位置索引值 ])
注意:slice()的参数位置有严格要求【参数1<参数2】
补充:[中括号括起来的表示可选参数]
② 举例说明:
var a = ' 1234567'
var b = a.slice(2)/ / b : '34567', a: '1234567'
- substring()
substring() 该方法与slice类似,但参数不能使用负数,若参数为负数会被当做0看待
① 使用格式:str.substring(索引值 , [ 索引值 ])
注意:substring()的参数位置没有严格要求
补充:[中括号括起来的表示可选参数]
② 举例说明:
var a = '1234567'
var b = a.substring(2) // b: '34567', a: '1234567'
var b = a.substring(2,5) // b: '345', a: '1234567'
var a = '1234567'
var b = a.substring(5,2) // b: '345', a : ' 1234567'
- substr()
substr() 区别于前两种方法的是:第二个参数为要截取的数量
① 使用格式:str.substr(开始位置索引值 , [ 截取的数量 ])
注意:当只有一个参数时,截取开始位置到字符串末尾。
补充:[中括号括起来的表示可选参数]
② 举例说明:
var a = '1234567'
var b = a.substr(2) // b: '34567' , a: '1234567'
var b = a.substr(2,3) // b: '345', a: '1234567'
小练习:实现任意英文字符串转为首字母大写。例:输入hEllo,输出Hello
思路:将字符串全部转为小写,然后在截取首字母进行大写,最后将大写的首字符与剩下的小写字符拼接。
function capitalize(str) {
str = str.toLowerCase()
return str[0].toUpperCase() + str.slice(1)
}
三、你不知道的小知识
1.localeCompare
利用localeCompare()和sort进行字符串排序;比较中文字符,第二个参数为可选,代表语言码,会按照该语言规则来进行比较
var a = [
{
name:"Bob'
},
{
name :"cart'
},
{
name: "Alice'
}
]
a.sort( function (a,b){
return a.name.localeCompare( b.name )
})
还可以通过地区码进行中文比较,其中‘ZH’表示中文,具体列表见ISO 639-1 语言代码
var a ='张三'
var b ='李四'
a.localeCompare( b,'ZH') //返回1
b.localeCompare( a,'ZH') //返回-1
四、网页小案例
1.题目要求
按指定格式输入日期,验证输入是否合法,若不合法就给出对应的提示,合法即提示输入成功。
测试以下无效用例:
① 2020-3-1
② 2020-03-01-01
③ aaaa-bb-01
④ 1877-13-33 //年份不能小于1900
⑤ 2020-04-31 //4月没有31号
⑥ 2020-02-30 //2月没有30号
⑦ 2021-02-29 //非闰年没有29号
如下所示:
2.源码奉上
建议先尝试着写一下,自己完成更有成就感喔!
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="time" type="text" placeholder="标准格式为:yyyy-mm-dd">
<input type="button" value="check" onclick="checkFormat()">
<script>
function checkFormat(){
var time = document.getElementById("time").value;
var arr = time.split("-");
if(arr.length==3){ // 判断分隔之后的元素个数,因为有两个“-” 所以分隔出来的元素应该为三个
for(var i=0;i<arr.length;i++){
if(isNaN(arr[i])){ // 判断每个元素是否都为数字
err("年月日必须为数字");
return;
}
}
if(arr[0].length==4&&arr[1].length==2&&arr[2].length==2){ // 判断格式 yyyy mm dd
arr[0] = Number(arr[0])
arr[1] = Number(arr[1])
arr[2] = Number(arr[2])
}else{
err("格式错误");
return;
}
if(arr[0]<1900){ // 年份不能小于1900
err("年份不能小于1900");
return;
}else{
if(arr[1]<1||arr[1]>12){ // 月份在 1~12
err("月份必须在1~12");
return;
}else{
switch(arr[1]){
case 4:
case 6:
case 9:
case 11:
if(arr[2]>30||arr[2]<1){
err("月份天数不能超过30");
return;
}
break;
case 2:
if((arr[0] % 4 == 0 && arr[0] % 100 != 0) || arr[0] % 400 == 0) {
if(arr[2]>29){
err("闰年2月不能超过29天");
return;
}
}else{
if(arr[2]>28){
err("平年2月不能超过28天");
return;
}
}
default:
if(arr[2]>31||arr[2]<1){
err("该月份天数不能超过31");
return;
}
}
}
}
}else{
err("格式输入有误");
return;
}
alert("输入成功!");
}
// 错误提示
function err(str){
alert(str)
document.getElementById("time").value="";
}
</script>
</body>
</html>
您如果对文章有其他的见解,欢迎指正~