ES6 学习笔记（六）基本类型String

字符串String

1、字面量

需要注意的地方：

• 由单引号或双引号括起来的字符序列。
• 单双引号可以嵌套，由最外围引号定界字符串
• 字符串字面量可以拆分成数行，每行必须以反斜线（\）结束，且反斜线都不计入字符串的内容。
• 在书写HTML的JS代码时，要注意与HTML代码混合搭配使用引号。

实例代码：

let str1 = "I have a dog"
let str2 = "My 'dog' likes \
eating meat"
console.log(str1) // I have a dog
console.log(str2);// My 'dog' likes eating meat

// 点击弹出hello
<button onclick="alert('hello')"></button>

2、转义字符

类型	描述
\’	单引号
\”	双引号
\n	换行
\r	回车
\	反斜线
\xA9	十六进制数表示Latin-1编码的版权符号
\u03C0	表示Unicode编码的字符π

3、字符的Unicode表示法

• JavaScript允许采用\uxxxx形式表示一个字符。其中，xxxx表示字符的Unicode编码。如：”\u0061”表示“a”
• 这种编码仅能表示\u0000~\uFFFF之间的字符。
  • 超出这个范围的字符，必须采用2个双字节的形式表示。
    如：”\uD842\uDFB7”表示“?”
  • 超过这个范围的编码则会被截取。如：”\u20BB7”---->"₻7"
• ES6提出的改进方案，利用大括号将整个编码括起来，从而识别为一个字符。如：”\u{20BB7}”表示”?”

4、String方法

• +表示字符串拼接。

  let s1 = "Java"
  let s2 = "Scripts"
  console.log(s1 + s2) // JavaScripts
  console.log("abc" + { value: 10 }) // abc[object Object]  类型名  构造函数名
  console.log("abc" + { value: 10, toString: function () { return    this.value.toString(); } }); // abc10

• String()，toString()，valueof()。
  • String()直接将传入的参数转化为字符串
  • toString()返回字符串描述
  • valueof()返回原始值

    let str = new String("abc123")
    console.log(str.valueOf()); // abc123
    console.log(str.toString()); // abc123
    console.log(new Date().valueOf()) // 1617794519537

5、String构造函数

• 通过new调用String()则会返回一个字符串对象

  let a = 100;
  console.log(typeof String(a)); // string
  console.log(typeof new String(a)); // object
  console.log(new String(a).length); // 3

6、字符串对象

• ES5常用方法

es5方法	描述
charAt()	返回在指定位置的字符
substring()	提取字符串中两个指定的索引号之间的字符
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
substr()	从起始索引号提取字符串中指定数目的字符
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf()	从后向前搜索字符串，返回最后一次出现的索引
split()	把字符串分割为字符串数组
replace()	在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串
concat()	拼接两个或更多字符串，并返回新的字符串
toUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
trim()	去除字符串两端的空格

实例代码：

let s2 = "hello,javascript"
s2.charAt(0)  //返回下标为0的字符 h
s2.substring(1,4) // 截取索引为1-3的字符 ell
s2.slice(1,4)// 截取索引为1-3的字符 ell
s2.slice(-3) // 从后往前数3个，截取时从左至右  ipt
s2.substr(2,3) // 从2开始，截取3个 llo
s2.indexOf("l") //得到第一次出现的下标  2
s2.lastIndexOf("l") // 最后一次出现的索引  3
s2.indexOf("l",3) // 3表示第一次出现位置  3
s2.split(", ") //分割字符串  ["hello,javascript"]
s2.replace("s","S") // 原字符串不变化  "hello,javaScript"
s2.concat("!") //拼接  "hello,javascript!"
s2.toUpperCase() //大写  "HELLO,JAVASCRIPT"
" abc ".trim() //去除两端的空格  "abc"

• ES6常用方法

es6方法	描述
charCodeAt()	返回在指定的位置的字符的 Unicode 编码
String.fromCharCode()	将 Unicode 编码转为字符
String.fromCodePoint()	静态方法返回使用指定的代码点序列创建的字符串
valueOf()	返回字符串对象的原始值
search()	用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，要执行忽略大小写的检索，追加 i。如果没有找到任何匹配的子串，则返回 -1
match()	用于查找字符串中指定的值，或找到一个或多个正则表达式的匹配，返回指定的值
startsWith()	查看字符串是否以指定的子字符串开头
endsWith()	查看字符串是否以指定的子字符串结尾
includes()	查找字符串中是否包含指定的子字符串
repeat()	复制字符串指定次数，并将它们连接在一起返回
padStart()	用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧（头部）开始填充。
padEnd()	用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的右侧（末尾）开始填充。

实例代码：

let s = String("\u{20bb7}");
let c0 = s.charCodeAt(0)
let c1 = s.charCodeAt(1)
let point = s.codePointAt(0)
console.log(s); // ?
console.log(c0); // 55362
console.log(c1); // 57271
console.log(point); // 134071
console.log(String.fromCharCode(point)); // ஷ
console.log(String.fromCharCode(c0, c1)); // ?
console.log(String.fromCodePoint(point)); // ? 

let str = "123abcd45678EFG90"
console.log(str.valueOf()); // "123abcd45678EFG90"
console.log(str.match(/\d/g)) // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
console.log(str.search(/abc/)) // 3

let s = "Hello JavaScript!"
console.log(s.startsWith("He")); // true
console.log(s.endsWith("pt!")); // true
console.log(s.includes("Ja")) // true
console.log(s.indexOf("aa")) // -1
console.log(s*2) // NaN
console.log(s.repeat(2)) // Hello JavaScript!Hello JavaScript!
console.log(s.repeat(0.2)) //
console.log(s.repeat(1.9)) // Hello JavaScript!

let s2 = "Go"
console.log(s2.padStart(5, "JS")) // JSJGo
console.log(s2.padEnd(5, "JS")) // GoJSJ
console.log(s2.padStart(10, '01234567'))  //  01234567Go

7、需要注意的细节

7.1 示例1

new String(100) == new String(100)
String(100) == new String(100) 

输出结果：
false
true

原因：
第一个，引用值比较的是它的引用，引用不同，所以结果为false
第二个，原始值与引用值相比较，引用值先要进行拆箱，才能进行比较

7.2 示例2

let s = "This is a dog"
let str = s.slice(2, 6)
console.log(str);

输出结果：
is i
这里的slice方法是截取小标为2-6的字符，不包括6。

• 为什么这里能使用s.slice呢？
  原因：
  这里的s是临时创建的一个包装对象（可以看成进行了一个new String的操作），所以可以使用s.slice方法，在调用完slice就消失掉了。