这是我参与 8 月更文挑战的第 26 天，活动详情查看： 8月更文挑战

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

5.6_字符串对象

在 JavaScript 中，字符串对象提供了些用于对字符串进行处理的属性和方法，可以很方便地实现字符串的查找、截取、替换、大小写转换等操作。

5.6.1_字符串对象的使用

字符串对象使用 new String() 来创建，在String 构造函数中传入字符串，就会在返回的字符串对象中保存这个字符串。

案例：演示，

//创建字符串对象
var str = new string('apple');
// 创建字符串对象
console.log (str);
// 输出结果: string{"apple"}

// 获取字符串长度，输出结果:5
console.log(str.length);

细心的读者会发现，在前面的学习中，可以使用 “ 字符串变量.length " 的方式进行获取，这种方式很像是在访问一个对象的 length 属性。

案例：演示，

var str = 'apple';
console.log (str.length);
// 输出结果: 5

实际上，字符串在 JavaScript 中是一种基本包装类型。JavaScript 中的基本包装类型包括String、Number 和 Boolean ，用来把基本数据类型包装成为复杂数据类型，从而使基本数据类型也有了属性和方法。

需要注意的是，虽然 Javascript 基本包装类型的机制可以使普通变量也能像对象一样访问属性和方法，但它们并不属于对象类型。

案例：演示，

var obj = new String('Hello');
console.log (typeof obj); 
// 输出结果: object

console.log (obj instanceof String); 
//输出结果: true

var str = 'Hello';
console.log (typeof str); 
// 输出结果: string

console.log (str instanceof String); 
// 输出结果: false

在这里插入图片描述

从上述代码可以看出，使用 new String() 返回的 obj 是一个对象，但是普通的字符串变量并不是一个对象，它只是一个字符串类型的数据。

5.6.2_根据字符返回位置

字符串对象提供了用于检索元素的属性和方法

字符串对象用于检索元素的属性和方法：

成员	作用
indexOf( search Value )	获取 search Value 在字符串中首次出现的位置
lastIndexOf( search Value )	获取 search Value 在字符串中最后出现的位置

案例：演示 indexOf() 和 lastIndexOf() 方法的使用，

var str = 'HelloWorld' ;

console.log( str.indexOf('o') );
// 获取"o"在字符串中首次出现的位置，返回结果:4
console.log( str.lastIndexOf('o')  );
// 获取"o"在字符串中最后出现的位置，返回结果:6

在这里插入图片描述

通过返回结果可以看出，位置从 0 开始计算，字符串第一个字符的位置是 0 ，第2个字符为1，以此类推，最后一个字符的位置是字符串的长度减1。

案例：在一组字符串中，找到所有指定元素出现的位置以及次数。字符串为 ’ Hello World, Hello JavaScript ’ 。

var str = 'Hello World,Hello Javascript';
var index = str.indexOf('o'); // 先找到第一个 o 出现的位置。
var num = 0; // 设置 o 出现的次数初始值为0。
while(index != -1){  // 通过 while 语句判断 indexOf 返回值的结果
//如果不是-1就继续往后进行查找，这是因为 indexOf 只能查找到第1个，
//所以后面的查找需要利用第2个参数来实现，给当前的索引 index 加1，
//从而实现继续查找。
console.log (index);// 依次输出:4、7、17
index = str.indexOf('o', index + 1);
num++;
}
console.log ('o出现的次数是:' + num);// o 出现的次数是:3

需要注意的是，字符串中的空格也会被当作一个字符来处理。

5.6.3_根据位置返回字符

在JavaScript中，字符串对象提供了用于获取字符串中的某一个字符的方法。

字符串对象用于获取某一个字符的方法

成员	作用
charAt(index)	获取 index 位置的字符，位置从 0 开始计算
charCodeAt(index)	获取 index 位置的字符的 ASCII 码
str [ index ]	获取指定位置处的字符( HTML5新增 )

案例：了解 charAt()、charCodeAt()、str[ 下标 ]的使用，

var str = 'Apple';
console.log (str.charAt(3));// 输出结果:1
console.log (str.charCodeAt(0));// 输出结果: 65(字符A的 ASCII 码为65)
console.log(str[0]);// 输出结果:A

5.6.4_[案例]统计出现最最多的字符和次数

案例：演示 charAt() 方法的使用。通过程序来统计字符串中出现最多的字符和次数

var str = 'Apple';
//第1步 统计每个字符的出现次数
var o = { };

for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); 
// 利用 chars 保存字符串中的每一个字符
if( o[chars] ) {   
// 利用对象的属性来方便查找元素
o[chars]++;
}else{
o[chars] = 1;
}
}

console.log(o); // 输出结果:{A: 1, p: 2, 1:1,e:1}

var max = 0;    // 保存出现次数最大值
var ch = '';    // 保存出现次数最多的字符

for(var k in o){
if (o[k] > max){
max = o[k];
ch = k;
}
}

// 输出结果:"出现最多的字符是:p,共出现了2次"
console.log('出现最多的字符是:' + ch + ',共出现了' + max + '次');

在这里插入图片描述

5.6.5_字符串操作方法

字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法

字符串对象用于截取、连接和替换字符串的方法：

成员	作用
concat(strl, str2, str3…)	连接多个字符串
slice(start,[ end ])	截取从 start 位置到 end 位置之间的一个子字符串
substring(start [,end] )	截取从 start 位置到 end 位置之间的一个子字符串，基本和 slice 相同，但是不接收负值
substr(start [, length] )	截取从 start 位置开始到 length 长度的子字符串
toLowerCase()	获取字符串的小写形式
toUpperfCase()	获取字符串的大写形式
split( [ sparator [, limit] )	使用 separator 分隔符将字符串分隔成数组，limit 用于限制数量
replace(str1, str2)	使用 str2 替换字符串中的 str1 ，返回替换结果，只会替换第一个字符

在使用上表中的方法对字符串进行操作时，处理结果是通过方法的返回值直接返回的，并不会改变字符串本身。

案例：演示，

var str = 'HelloWorld';
str.concat('!');     // 在字符串末尾拼接字符，结果:HelloWorld!
str.slice(1, 3);     // 截取从位置1 开始到位置3 范围内的内容，结果：el
str.substring (5);  // 截取从位置5 开始到最后的内容，结果: World
str.substring(5, 7);  // 截取从位置5 开始到位置7 范围内的内容，结果：Wo
str.substr(5);      // 截取从位置5 开始到字符串结尾的内容，结果: World
str.substring(5, 7);// 截取从位置5 开始到位置7 范围内的内容，结果：Wo
str.toLowerCase();  // 将字符串转换为小写，结果：helloworld
str.toUpperCase();  // 将字符串转换为大写，结果：HELLOWORLD
str.split('1');    // 使用"1"切割字符串，结果：["He","","oWor","d"]
str.split('1', 3);  // 限制最多切割3次，结果：["He","","oWor"]
str.replace('World','!');// 替换字符串，结果："Hello!"

5.6.6_[案例]判断用户名是否合法

案例：要求用户名长度在 3 ~ 10 范围内，不允许出现敏感词 admin 的任何大小写形式。

var name = prompt('请输人用户名');
if (name.length < 3 || name.length > 10){
alert('用户名长度必须在3 ~ 10之间。');
} else if (name.toLowerCase().indexOf('admin') !== -1){
alert('用户名中不能包含敏感词: admin。');
}else{
alert('恭喜您，该用户名可以使用');
}

上述代码通过判断 length 属性来验证用户名长度 ; 通过将用户名转换为小写后查找里面是否包含敏感词 admin 。实现时 name 先转换为小写后再进行查找，可以使用户名无论使用哪种大小写组合，都能检查出来。indexOf() 方法在查找失败时会返回 -1，因此判断该方法的返回值即可知道用户名中是否包含敏感词。

5.7_值类型和引用类型

在 JavaScript 中，基本数据类型 ( 如字符串型、数字型、布尔型、undefined、null )又称为值类型，复杂数据类型(对象)又称为引用类型。引用类型的特点是，变量中保存的仅是一个引用的地址，当对变量进行赋值时，并不是将对象复制了一份，而是将两个变量指向同一个对象的引用。

案例：例如，下列代码中的 obj1 和 obj2 指向了同一个对象。

//创建一个对象，并通过变量 obj1 保存对象的引用
var obj1 = {name:'小明', age:18};
// 此时并没有复制对象，而是 obj2 和 obj1 两个变量引用了同一个对象

var obj2 = objl;
// 比较两个变量是否引用同一个对象
console.log (obj2 == obj1); // 输出结果:true
// 通过 obj2 修改对象的属性
obj2.name = '小红';
// 通过 obj1 访向对象的 name 属性
console.log (obj1.name) // 输出结果:小红

上述代码执行后，obj1 和 obj2 两个变量引用了同一个对象，此时，无论是使用 obj1 操作对象还是使用 obj2 操作对象，实际操作的都是同一个对象。

当 obj1 和 obj2 两个变量指向了同一个对象后，如果给其中一个变量( 如 obj1 ) 重新赋值为其他对象，或者重新赋值为其他值，则 obj1 将不再引用原来的对象，但 obj2 仍然在引用原来的对象。

案例：演示上述概述：

var objl = name:'小明', age: 18 };
var obj2 = objl;
// obj1 指向了一个新创建的对象
obj1 = { name: '小红', age: 17 };
// obj2 仍然指向原来的对象
console.log (obj2.name); //输出结果:小明

在上述代码中，第1行代码创建的 name 为小明的对象，最开始只有 obj1 引用，在执行第2行代码后，obj1 和 obj2 都引用该对象，执行第4行代码后，只有 obj2 引用该对象。当一个对象只被一个变量引用的时候，如果这个变量又被重新赋值，则该对象就会变成没有任何变量引用的情况，这时候就会由 JavaScript 的垃圾回收机制自动释放。

当引用类型的变量作为函数的参数来传递时，其效果和变量之间的赋值类似。如果在函数的参数中修改对象的属性或方法，则在函数外面通过引用这个对象的变量访问到的结果也是修改后的。

案例：演示上述概述，

function change(obj){
obj.name = '小红'; // 在函数内修改了对象的属性
}
var stu = { name:'小明', age: 18 };
change(stu);
console.log (stu.name); // 输出结果:小红

在上述代码中，当调用 change() 函数后，在 chang() 函数中修改了 obj.name 的值。修改后，在函数外面超过 stu 变量访问到的结果是修改后的值，说明变量 stu 和参数 obj 引用的是同一个对象。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（十一）

🌊🌈关于前言：

🌊🌈关于内容：

5.6_字符串对象

5.6.1_字符串对象的使用

5.6.2_根据字符返回位置

5.6.3_根据位置返回字符

5.6.4_[案例]统计出现最最多的字符和次数

5.6.5_字符串操作方法

5.6.6_[案例]判断用户名是否合法

5.7_值类型和引用类型

🌊🌈往期回顾：

🌊🌈关于后记：