JavaScript（三）字符串

﹏ヽ暗。殇╰゛Y 2024-04-17 06:06 41阅读 0赞

> 本文为个人学习、使用JavaScript过程中的内容总结，结合所学、网络资源、博客等。  
>   
> 详细专栏教程可参考：JS官方文档、菜鸟教程。  
> [一、菜鸟教程][Link 1]  
>

> 推荐，廖雪峰个人博客，细节描述的较多。此外博客中含有在线编辑器，可实时运行DEMO  
> [二、廖雪峰JS教程][JS]

*  目录：
    
     *  [简介][Link 2]
     *  [快速入门][Link 3]
     *  [字符串][Link 4]
     *  函数：
     *  标准对象：
     *  面向对象编程：
     *  浏览器：
     *  jQuery：
     *  错误处理：
     *  underscore：
     *  Node.js

--------------------

## 字符串 ##

*  声明字符串
 *  双引号、单引号与转义
 *  索引字符串
 *  字符串属性和方法
 *  ES6特性
    
     *  多行字符串
     *  字符串连接

--------------------

#### 声明字符串 ####

*  使用字符创建：

var firstName = "zhou"

*  使用 new 关键字将字符串定义为一个对象 **PS：强烈不推荐！**

var lastName = new String("Lee")

返回类型：

typeof firstName // 返回 String
    typeof  lastName// 返回 Object

*  可以用\\x\#\#形式的十六进制表示ASCII字符：

'\x41'; // 等同于 'A'

*  可以用\\u\#\#\#\#表示一个Unicode字符：

'\u4e2d\u6587'; // 完全等同于 '中文'

#### 双引号、单引号、转义 ####

*  引号中可以插入任意的的字符，使用单引号或双引号：

var carname = "Volvo XC60";
    var carname = 'Volvo XC60';

*  如果一个字符串又包含了“”双引号，字符串就会被截断，此时需要转义双引号，反斜线等：  
    转义字符\\可以转义很多字符，比如\\n表示换行，\\t表示制表符，字符\\本身也要转义，所以\\表示的字符就是\\

"We are the so-called "Vikings" from the north."

**显示：** We are the so-called，内容被双引号截断了。

此时，使用\\转义字符，对字符串内的双引号进行转义：

"We are the so-called \"Vikings\" from the north."

**显示：** We are the so-called “Vikings” from the north.

**或者，** 字符串内部使用‘’单引号：

"We are the so-called 'Vikings' from the north."

**显示：** We are the so-called ‘Vikings’ from the north.

#### 索引字符串 ####

可以使用索引位置来访问字符串中的每个字符：

var lastName = "Lee";
    var character = lastName[2];//e

使用类似数组的下标操作，即可获取指定位置的字符：

var lastName = "Lee";
    lastName[0]://L
    lastName[1];//e

**PS：字符串是不可变的，对索引位置赋值，没有错误，但也没有效果。**

var s = 'Test';
    s[0] = 'X';
    alert(s); // s仍然为'Test'

#### 字符串属性 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">constructor</td> 
   <td align="left">返回创建字符串属性的函数</td> 
  </tr> 
  <tr> 
   <td align="left">length</td> 
   <td align="left">返回字符串的长度</td> 
  </tr> 
  <tr> 
   <td align="left">prototype</td> 
   <td align="left">允许您向对象添加属性和方法</td> 
  </tr> 
 </tbody> 
</table>

#### 字符串方法 ####

JavaScript为字符串提供了一些常用方法，注意，调用这些方法本身不会改变原有字符串的内容，而是返回一个新字符串：

**toUpperCase，返回一个字符串的全大写**

var s = 'Hello';
    s.toUpperCase(); // 返回'HELLO'

**indexOf，返回指定字符串的出现位置**

var s = 'hello, world';//注意，逗号后有个空格
    s.indexOf('world'); // 返回7,从0开始
    s.indexOf('World'); // 没有找到指定的子串，返回-1

**substring，返回指定索引区间的子串**

var s = 'hello, world'；//注意，逗号后有个空格
    s.substring(0, 5); // 从索引0开始到5（不包括5），返回hello
    s.substring(7); // 从索引7开始到结束，返回world

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>charAt()</td> 
   <td>返回指定索引位置的字符</td> 
  </tr> 
  <tr> 
   <td>charCodeAt()</td> 
   <td>返回指定索引位置字符的 Unicode 值</td> 
  </tr> 
  <tr> 
   <td>concat()</td> 
   <td>连接两个或多个字符串，返回连接后的字符串</td> 
  </tr> 
  <tr> 
   <td>fromCharCode()</td> 
   <td>将 Unicode 转换为字符串</td> 
  </tr> 
  <tr> 
   <td>indexOf()</td> 
   <td>返回字符串中检索指定字符第一次出现的位置</td> 
  </tr> 
  <tr> 
   <td>lastIndexOf()</td> 
   <td>返回字符串中检索指定字符最后一次出现的位置</td> 
  </tr> 
  <tr> 
   <td>localeCompare()</td> 
   <td>用本地特定的顺序来比较两个字符串</td> 
  </tr> 
  <tr> 
   <td>match()</td> 
   <td>找到一个或多个正则表达式的匹配</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>替换与正则表达式匹配的子串</td> 
  </tr> 
  <tr> 
   <td>search()</td> 
   <td>检索与正则表达式相匹配的值</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>提取字符串的片断，并在新的字符串中返回被提取的部分</td> 
  </tr> 
  <tr> 
   <td>split()</td> 
   <td>把字符串分割为子字符串数组</td> 
  </tr> 
  <tr> 
   <td>substr()</td> 
   <td>从起始索引号提取字符串中指定数目的字符</td> 
  </tr> 
  <tr> 
   <td>substring()</td> 
   <td>提取字符串中两个指定的索引号之间的字符</td> 
  </tr> 
  <tr> 
   <td>toLocaleLowerCase()</td> 
   <td>根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射</td> 
  </tr> 
  <tr> 
   <td>toLocaleUpperCase()</td> 
   <td>根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射</td> 
  </tr> 
  <tr> 
   <td>toLowerCase()</td> 
   <td>把字符串转换为小写</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>返回字符串对象值</td> 
  </tr> 
  <tr> 
   <td>toUpperCase()</td> 
   <td>把字符串转换为大写</td> 
  </tr> 
  <tr> 
   <td>trim()</td> 
   <td>移除字符串首尾空白</td> 
  </tr> 
  <tr> 
   <td>valueOf()</td> 
   <td>返回某个字符串对象的原始值</td> 
  </tr> 
 </tbody> 
</table>

#### ES6特性：多行字符串、模版字符串 ####

*  多行字符串

多行字符串需要用\\n，写起来比较费事，最新的ES6标准新增了一种多行字符串的表示方法，用反引号表示：  
**原始写法：**

var s="test,\nthis is a multi-line string,\nend.";

**输出：**  
test,  
this is a multi-line string,  
end.

**ES6写法：**

`this is
    a muti-line
    string`

**输出：**  
this is  
a muti-line  
string

*  模版字符串

要把多个字符串连接起来，可以用+号连接：  
**原始写法：**

var firstName =“Lee”；
    var lastName = “Zhou”；
    var name =“hello，”+firstName+lastName+“i‘m xxx’”；

如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，中间变量用$\{\}表示，会自动替换字符串中的变量：  
**ES6写法：**

var name =`hello，${firstName} ${lastName},i'm xxx`;

**注意：反引号在键盘的ESC下方，数字键1的左边，英文半角可以输入：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70]

> 上一篇：[JavaScript（二）快速入门][Link 3]

[Link 1]: https://www.runoob.com/js/js-tutorial.html
[JS]: https://www.liaoxuefeng.com/wiki/1022910821149312
[Link 2]: https://blog.csdn.net/qq_35206244/article/details/100072779
[Link 3]: https://blog.csdn.net/qq_35206244/article/details/100072972
[Link 4]: https://blog.csdn.net/qq_35206244/article/details/100074719
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MjA2MjQ0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/8ac8ef2735c54737a511228d267c3416.png