本文主要是介绍响应式网页设计之String对象，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript对象编程（六）

• 一、初识String对象
• • 1.什么是String对象
  • 2.创建String对象
  • 3.String对象访问
• 二、String对象的方法
• • 1.replace()修改String对象
  • 2.split()分割String对象
  • 3.indexOf()查找字符
  • 4.toLowerCase()转为小写
  • 5.toUpperCase()转为大写
  • 6.trim() 移除空白符
  • 7.截取String对象
• 三、你不知道的小知识
• • 1.localeCompare
• 四、网页小案例
• • 1.题目要求
  • 2.源码奉上

一、初识String对象

1.什么是String对象

String 对象用于存储和处理文本（字符串），字符串可以使用单引号或双引号，单引号里可以嵌套双引号，双引号里也可以嵌套单引号，但是单引号中不能嵌套单引号，双引号中不能嵌套双引号。

2.创建String对象

1. var str = new String( 'Hello World ’ )
2. 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可以得到字符串的长度

1. 使用[]（索引）访问字符串

var s=“qaz123”
consolo.log(s[2])	//返回 a

2. 使用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对象

1. slice()
   slice() 截取字符串，与数组的slice方法相同《响应式网页设计之数组的方法》
   ① 使用格式：str.slice(开始位置索引值 , [ 结束位置索引值 ])
        注意：slice()的参数位置有严格要求【参数1<参数2】
        补充：[中括号括起来的表示可选参数]
   ② 举例说明：

var a = ' 1234567'
var b = a.slice(2)/ / b : '34567', a: '1234567'

2. 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'

3. 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>

您如果对文章有其他的见解，欢迎指正~

这篇关于响应式网页设计之String对象的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！