js内置对象之String对象

---

前言

js内置对象是为了方便开发者使用而设计的， 它提供了一些常用的功能(属性和方法)，如：Math、Date、Array、String，接下来我们一起学习js内置对象，由于前面函数章节已经介绍了Math对象和Date对象，这里不再多做说明，不了解可以点击链接查看: 函数章节链接.

---

一、String对象

作用：主要用于存储和处理文本

1.String对象的创建

// 语法格式
var str = new String('Hello World!')

// 访问String对象的属性
var str = new String('hello world!');
    console.log(str.length);

2.基本包装类型

请看以下代码：

// 创建字符串，打印出长度
var str = 'hello world!';
    console.log(str.length);

这里有一个问题：不是只有对象才有属性和方法嘛？为什么简单数据类型会有长度属性呢？下面查看下字符串和字符串对象的类型：

// 创建字符串，打印出长度
 var str1 = new String('hello world!')//创建字符串对象
 var str2 = 'hello world!'//创建字符串
    console.log(str1.length);//打印字符串对象的长度
    console.log(str2.length);//打印字符串的长度
    console.log(typeof (str1));//查看字符串对象的数据类型
    console.log(typeof (str2));//查看字符串类型

其实：js为了方便操作基本数据类型，提供了3个特殊的引用类型(基本包装类型)：String，Number，Boolean
通过包装，可以把基本数据类型包装成复杂数据类型，使得基本数据类型有了属性和方法，这个过程由js内部完成

上面str2代码执行过程：

// str2能使用属性和方法是因为js内部自动创建了临时字符串对象
    var temp = new String('hello world!');//创建临时变量（字符串对象）
    var str2 = temp;//临时对象赋值给str2
    console.log(str2.length);//打印长度
    temp = null;//执行完之后销毁对象，由js内部自动完成

3.String对象访问

在早期的JavaScript设计中，字符串被设计为一种只读的字符数组，因此，字符串可以用数组的访问方式访问其中的字符

1、下标访问

// 1、下标访问
 var str = 'hello'
    console.log(str[1]);

2、标准访问方式charAt()

// 1、下标访问
 var str = 'hello'
    console.log(str[1]);
   	//

结果如图：

4.字符串的不可变性

在 JavaScript 中，字符串是不可变的，但是可以重新赋值
请看下面代码：

	var str = 'red'
    console.log(str);
    str = 'blue'
    console.log(str);

结果如图：

这里我们看到值的改变只是内存地址的指向变了，但是字符串并没有改变

二、String对象的常用方法

1. indexOf(): 返回要查找的字符第一次出现的位置下标，若未找到返回-1

代码如下（示例）：

  	var a = '123456'
    console.log(a.indexOf(3));
    console.log(a.indexOf(7));

结果如图：

2. toLowerCase() 把字符串转为小写，不会修改原字符串

代码如下（示例）：

  var a = 'ABC'
    console.log(a);
    console.log(a.toLowerCase());

结果如图：

3. toUpperCase() 把字符串转为大写，不会修改原字符串

代码如下（示例）：

    var a = 'abc'
    console.log(a);
    console.log(a.toUpperCase());

4. replace() 字符串替换

// 语法格式(注意：replace()无法修改原字符串，只是返回一个新字符串)
str.replace(要修改的字符,替换后的字符)

// replace()的使用
	var a = 'ABC'
    console.log(a);
    console.log(a.replace('A', 'a'));//首字母替换
    var b = 'ABC'
    console.log(b);
    console.log(b.replace('A', ''));//替换为空
    var c = 'ABCDE'
    console.log(c);
    console.log(c.replace('ABC', 'abc'));//对多个字符进行替换

结果如图：

5. split() 传入一个分隔符作为参数，以该分隔符为标准，将字符串进行分割并存入一个新数组并返回

// 语法格式(返回的是字符数组)
str.split(分割符号,[分割长度(可选)])

//split()的使用
	var str = '我-好-帅'
    console.log(str.split('-'));	//没写分割长度，默认全部分割
    console.log(str.split('-', 2));	//分割长度为2

结果如图：

注意：

1. 分割符的位置

//注意分割符-的位置
	var str = '-我-好-帅'
    console.log(str.split('-'));

结果如图：

2. 分割符为空

//分割符为空
	var str = '我好帅'
    console.log(str.split(''));

3.分隔符为空格

// 分割符为空格
    var str = '我好帅'
    console.log(str.split(' '));
    var str2 = '我 好 帅'
    console.log(str2.split(' '));

结果如图：

6. trim() 移除头尾的空白符(空格、制表符、换行符等)，不会修改原字符串
   常用来对登录的账号密码进行规范

// trim()的使用
    var str = ' a b c '
    var str2 = str.trim()
    console.log(str);	//打印原字符串
    console.log(str2);	//打印去掉头尾的字符串

结果如图：

7. slice() 截取字符串，与数组的slice方法相同
   substring() 该方法与slice类似，但参数不能使用负数，若参数为负数会被当做0看待
   注意：substring()的参数位置没有严格要求，如str.substring(6,2)会看作str.substring(2,6)截取

// 语法格式
str.slice(索引下标,[结束索引，默认为结尾(可选)])
str.substring(索引下标,[结束索引，默认为结尾(可选且不为负数)])

//slice()substring()和的使用
    var str1 = '12345678 '
    var str2 = str1.slice(2)		//未指定结束参数，默认截取到结尾
    var str3 = str1.slice(2, 6)		//制定结束位置，截取到索引为6但不包含索引6的位置
    var str4 = str1.substring(2)
    var str5 = str1.substring(2, 6)
    console.log(str2);
    console.log(str3);
    console.log('------------');
    console.log(str4);
    console.log(str5);

结果如图：

8. substr() 截取字符串，与substring()不同

// 语法格式
str.substr(索引下标,[截取的个数,未指定默认截取到最后])

//substr()的使用
    var str1 = '12345678 '
    var str2 = str1.substr(2)		//未指定参数，默认截取到结尾
    var str3 = str1.substr(2, 3)	//从索引为2开始截取，截取3个
    console.log(str2);
    console.log(str3);

结果如图：

9. concat() 将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。
   concat()方法并不影响原字符串

// 语法格式
a.concat(b)

//concat()的使用
    var str1 = '你好'
    var str2 = '我不好'
    var str3 = str1.concat(str2)	//字符串合并，不影响原字符串
    console.log(str1);
    console.log(str2);
    console.log(str3);

结果如图：

三、利用localeCompare()和sort()进行排序

1.localeCompare()
语法格式：
a.localeCompare(b,[可选，代表语言码，默认按ascll码比较]) ------>返回-1
b.localeCompare(a,[可选，代表语言码，默认按ascll码比较]) ------>返回1
a.localeCompare(a,[可选，代表语言码，默认按ascll码比较]) ------>返回0

// 利用localeCompare()和sort()进行排序
	  var a = [
        { name: 'Bob' },
        { name: 'Cart' },
        { name: 'Alice' },
    ]
    a.sort(function (a, b) {	//使用匿名函数
        return a.name.localeCompare(b.name)
    })
    console.log(a);

结果如图：

四、String对象使用小练习

1.使用字符串方法实现字符串‘你爱不爱我’的颠倒，输入‘我爱不爱你’
2.将下划线命名法的字符串转为小驼峰命名法，如：输入this_is_an_example，输出thisIsAnExample
来试试吧，先别急着偷看答案！

// 第一题答案
	var str = '你爱不爱我'
    console.log(str.split('').reverse().join(''));
//第二题答案(这里可以封装成方法,自己去探索哟)
   	var s = 'this_is_an_example'
            var b = s.split("_")       
            var newArr = b[0]
            for (i = 1; i < b.length; i++) {
                newArr += b[i].substr(0, 1).toUpperCase().concat(b[i].substr(1))
            }
            console.log(newArr);

---

总结

String对象是非常常用的，它的很多方法也是我们经常使用的，希望读者能够多多了解并加以练习，孰能生巧。