ES6学习笔记（五）：基本引用类型3：字符串与string

1.字符串

字符串字面量

单引号和双引号都可以表示字符串字面量，但需要注意的一点的是在HTML中使用双引号，js中使用单引号以避免混淆，在JSON中，必须使用双引号。

{
	'hello,world';
	"Hello,world";
}

关于字符串的访问，可以有两种方式，字符串相当于是一个不可变的序列，因此可以通过索引来访问。

{
	'hello'.charAt(1); // 字符串方法charAt，获取指定位置的字符
	'hello'[1]; // 相当于按数组索引的方式来获取，结果为e
}

转换为字符串

值	结果
undefined	‘undefined’
null	‘null’
布尔值	false为’false’，true为’true’
数字	直接转换，例如3.14为’3.14’
字符串	就是自己，没什么好转的
对象	调用ToPrimitive(vaalue,string)将原始值结果转为字符串

手动转为字符串，有3种常见的方式将值转换为字符串

{
	String(value); // String是一个方法，不是构造函数
	''+value; // 相当于拼接
	value.toString(); // 直接调用toString方法，对undefined和null不生效
}

字符串的拼接

拼接字符串通常有两种方法，一是直接用加号运算符合并，只要有一个是字符串那么就能完成拼接。第二种是拼接字符串数组，将所有的字符串添加进一个数组然后调用join方法将他们拼接起来。

{
	let str = 'Java';
	str += 'Script' // 结果为 JavaScript

	// 第二种方式
	let arr = [];
	arr.push('Java');
	arr.push('Script');
	arr.join('');  // 结果为 JavaScript
}

2.字符串函数string

可以通过两种方式调用String方法

作为常规函数，将参数value转换为原始字符串值

{
	String(100) // 100
    let x; String(x) // undefined
    let x=null; String(x) // null
    String({value:100}) // [object Object]
    String({value:100, toString: function(){ return this.value; }}) // 调用toString方法获得对象的原始值 100
}

作为构造函数，会创建一个String对象的实例

{
	typeof String(x) // 普通函数返回的是 string
	typeof new String('abc') // 构造函数返回 object
}

字符串的常用方法，字符串原始值的所有方法都是在prototype上的也就是String.prototype

{
	// 字符串方法
    let str = 'JavaScript';
    console.log(str.length); // 字符串的属性，表示字符串中字符的个数,10
    console.log(str.charAt(1)); // 返回给定位置的字符，a
    console.log(str.charCodeAt(1)); // 返回给定位置字符的ASCII码值，97
    // Java 返回一个子字符串，从第一个参数开始到第二个参数为止，不包括第二个参数，两个参数都可以为负数
    console.log(str.slice(0,4)); 
    console.log(str.substr(0,6)); // JavaSc 第一个参数为开始位置，第二个为截取长度，返回截取的字符串
    console.log(str.substring(2,4)); // va 功能与slice相同
    console.log(str.split('')); // 原字符串会被空字符分割并组成一个数组返回
    console.log(str.concat('!!')); // 会拼接指定参数的字符返回
    console.log(str.indexOf('a',2)); // 返回第一个参数字符的索引，第二个参数为从第二个参数的起始位置开始查询，如果没找到返回-1
    console.log(str.toUpperCase()); // 转为全大写字母
    console.log(str.toLowerCase()); // 转为全小写字母
}

更多方法可以随时查阅文档，String方法

关于字符串处理的一个应用，电话号码的模糊处理

{
    // 电话号码模糊处理
    function phone(mobile,len=8){
        return String(mobile).slice(0,len * -1) + '*'.repeat(len)
    }
    console.log(phone(15198211803)); // 输出151********
}

第一个参数是传入的手机号码，第二个参数是需要模糊处理的位数，可以有一个默认值，函数里面返回的是先把传入的手机号码转为字符串，然后调用slice函数切割给定长度的位数，然后再拼接*号，把指定位数的号码拼接为 *号。

3.ES6中字符串的扩展

ES6中扩展的一部分字符串方法

方法名	功能
charCodeAt(index)	返回指定字符的Unicode编码
startsWith(value)	返回布尔值，判断是否以给定字符串开头
endsWith(value)	返回布尔值，判断是否以给地字符串结尾
includes(value,position)	返回布尔值，判断一个字符串是否包含另一个字符串，第二个参数为从指定索引开始搜索
padStart(targetLength [, padString)	用另一个字符串填充当前字符串，从头部开始，总长度为第一个参数
padEnd(targetLength [, padString])	用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充

ES6中的模板字符串

{
	// 没有模板字符串的拼接
    let str = 'Java';
    let str2 = 'Script'
    console.log(str + str2 + '!!'); // 输出 JavaScript!!
    // 使用模板字符串的拼接
    console.log(`${str}${str2}!!`); // 一样输出 JavaScript!!
}

模板字符串使用反引号``括起来模板字符串可以在中间使用变量或者表达式插值，这样就更方便的进行操作，并且可以实现换行，而普通的字符串换行就会报错。

模板字符串的简单应用

{
	let arr = ['张三','李四','赵云','刘备']
    let html = '';
    for(let index in arr){
        html += `<div>${arr[index]}</div>`
        console.log(arr[index]);
    }
    document.body.innerHTML = html;
}

效果如下：

使用for in 循环方法去获取数组的索引，然后通过索引获得数组里面的值，再通过模板字符串放入div标签中，这样就可以在网页中生成需要的页面了。