ES6 String的扩展

叁歲伎倆 2023-08-17 15:23 88阅读 0赞

## 模板字符串 ##

ES6之前，使用“+”操作符拼接字符串

var a='hello';
    var b=a+' world!';  //hello world!

> ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。**模板字符串是一种能在字符串文本中`内嵌表达式`的字符串字面量。**

*  模板字符串使用`反引号`来代替普通字符串中的用双引号和单引号。
 *  模板字符串中可以包含$\{expression\}占位符。expression可以是任意的 js 表达式，甚至是另一个模板字符串，js会将其计算的结果作为字符串输出。
 *  模板内部书写可以随意换行
 *  模板内部可随意加单双引号
 *  如果模板中需要使用$,\{等字符串，则需要进行转义。

let a="hello";
    let b=`${ a} world!`;    //hello world!

相当于：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]  
模板字符串的书写方式要比传统方式便利和更容易阅读,如输出html代码时常用到的单双引号不再需要转移，  
由于允许换行书写，使得html代码的结构更加清晰。

let dom1='<div class="wrap"><p>这里是一个段落文字，直接使用单引号会报错！</p></div>';
    let dom2=`<div class="wrap"> <p>这里是一个段落文字，直接使用单引号不会报错！<p> </div>`

## 新增的方法 ##

#### 一、实例方法 ####

#### includes() ####

:用途：判断一个字符串是否包含参数字符串  
返回值：布尔值

console.log('hello world'.includes('hello'))   //true

#### startsWith() ####

用途：判断一个字符串是否以参数字符串开头  
返回值：布尔值

console.log('hello world'.startsWith('hello'))   //true

#### endsWith() ####

用途：判断一个字符串是否以参数字符串结尾  
返回值：布尔值

console.log('hello world'.endsWith('hello'))   //false
    console.log('hello world'.endsWith('world'))   //true

#### repeat() ####

用途：将原字符串重复n次  
返回值：不改变原字符串，返回一个新字符串

console.log('hello'.repeat(3));   //hellohellohello

#### codePointAt() ####

用途：返回字符码点的十进制值

let str='一';
    console.log(str.codePointAt(0));   //19968 十进制code point
    console.log(str.codePointAt(0).toString(16));  //4e00 十六进制code point

### 二、 静态方法 ###

#### String.fromCodePoint函数 ####

该方法可接受一个或多个指定的 Unicode 值，然后返回一个字符串。  
String 对象实例中的有方法charCodeAt()，可返回指定位置的字符的 Unicode 编码  
String 对象静态方法fromCharCode()，可根据Unicode码返回字符串

console.log("一".charCodeAt(0).toString(16))      //4e00
    console.log(String.fromCharCode(0x4e00));         //一
    console.log('\u4e00')   //一

*  前面加0x,表示16进制的数值
 *  字符串中使用‘\\u’进行转码，将后面的16进制数据变成可识别的汉字

#### **ps：** ####

UTF-8就是在互联网上使用最广的一种Unicode的实现方式，它是一种变长的编码方式。它可以使用1~4个字节表示一个符号，根据不同的符号而变化字节长度，UTF-8编码的长度是1-6个字节。  
UTF-8以字节为单位对Unicode进行编码。从Unicode到UTF-8的编码方式如 下：

<table> 
 <thead> 
  <tr> 
   <th>Unicode编码(16进制)</th> 
   <th>UTF-8 字节流(二进制)</th> 
   <th>字节数</th> 
   <th>十进制</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0000 - 007F</td> 
   <td>0xxxxxxx</td> 
   <td>1</td> 
   <td>1-127</td> 
   <td>与ASCII编码完全相同</td> 
  </tr> 
  <tr> 
   <td>0080 - 07FF</td> 
   <td>110xxxxx 10xxxxxx</td> 
   <td>2</td> 
   <td>128-2047</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>0800 - FFFF</td> 
   <td>1110xxxx 10xxxxxx 10xxxxxx</td> 
   <td>3</td> 
   <td>2048-65535</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>10000 - 10FFFF</td> 
   <td>11110xxx 10xxxxxx 10xxxxxx 10xxxxxx</td> 
   <td>4</td> 
   <td>65536-1114111</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>200000 - 3FFFFFF</td> 
   <td>111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx</td> 
   <td>5</td> 
   <td>2097152-67108863</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>4000000 - 7FFFFFFF</td> 
   <td>1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx</td> 
   <td>6</td> 
   <td>67108864-2147483647</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

汉字19968-40869  
汉字的unicode范围是：0x4E00-0x9FA5（19968-40869），所以才说utf8中汉字是3个字节表示。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20230810/374085221abd4bd59e5b46339ddd6142.png