好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

JavaScript 字符串

JavaScript 字符串

字符串是一种数据类型,由字符组成,用于表示文本数据。

1. 创建字符串

使用字符串字面量就可以创建字符串。

  var  str1  =   ''  ; 

 var  str2  =   ""  ; 
 

以上例子创建了两个空字符串。字符串可以用单引号包裹,也可以用双引号包裹, 效果 是一样的。

大部分前端程序员都会选择单引号,这么做的原因是为了契合 HTML 的书写习惯,拼接 HTML 的时候,HTML 元素的 属性 可以直接使用双引号包裹。

  var  html  =   '<p class="tip">更多请<a href="/detail" target="_blank">了解详情</a></p>'  ; 
 

如果换成双引号则需要转义:

  var  html  =   "<p class=\"tip\">更多请<a href=\"/detail\" target=\"_blank\">了解详情</a></p>"  ; 
 

2. 字符串转义

转义可以理解成字面意思,即转换字符的含义。

比如想在字符串里描述换行符,就会使用 \n 。

  var  str  =   '第一行\n第二行\n第三行'  ; 

console .  log  ( str )  ;   // 将会 输出 换行的字符串 
 

通常转义字符都是通过 \ 开头的。

同理,如果需要在双引号包裹的字符串中使用双引号,或者单引号包裹的字符串中使用单引号,就需要对引号进行转义。

  var  str  =   '我' 要 '显' 示 '一' 堆 '单' 引 '号'  ; 
 

这样就会报错,JavaScript 无法知道这些引号的含义。

  var  str  =   '我\'要\'显\'示\'一\'堆\'单\'引\'号'  ; 
 

通过 \n 表示 一个 单引号,就可以让 JavaScript 理解,需要在字符串里描述 一个 单引号。

2.1 转义表

JavaScript 支持 以下字符的转义:

\' 单引号 \" 双引号 \& 和号 \\ 反斜杠 \n 换行符 \r 回车符 \t 制表符 \b 退格符 \f 换页符

3. 使用场景

3.1 用于描述文案

文案描述是最常见的情景之一,文案本身就是字符串,使用字符串是最契合场景的。

  function   gameover  ( age )   { 
   // 判断是否游戏结束 
   return  age  >   ; 
 } 

 var  isGameover  =   gameover  (  )  ; 

 if   ( isGameover )   { 
  console .  log  (  '游戏结束'  )  ; 
 } 
 

游戏结束 就是 一个 确确实实的文案,用于展现。

通过 输出 日志简单调试的也是,也会用到字符串作为文案进行观察。

  function   something  (  )   { 
  console .  log  (  '循环开始之前'  )  ; 

   var  i
   for   ( i  =   ;  i  <   ;  i --  )   { 
    console .  log  (  '循环中,第 '   +   ( i  +   )   +   ' 次循环'  )  ; 
   } 

  console .  log  (  '循环结束'  )  ; 
 } 

 something  (  )  ; 
 

以上模拟 一个 程序卡死的状态,通过调试 输出 很容易发现是由死循环导致的,原因是将循环 条件判断 后执行 的表达式写错了。

3.2 拼接HTML

拼接 HTML 是前几年大部分前端程序员做的最多的事情之一。

现在有了许多前端框架,解放了很多 HTML 拼接的工作。

早期想渲染 一个 列表,需要前端程序员在 JavaScript 中拼接 HTML 后再使用。

  function   getList  ( content )   { 
   return   '<li class="list-item">'   +  content  +   '</li>'  ; 
 } 

 var  arr  =   [  ]  ; 

 var  i ; 
 for   ( i  =   ;  i  <=   ;  i ++  )   { 
  arr .  push  (  getList  (  '我是第'   +  i  +   '条'  )  )  ; 
 } 

document . body . innerHTML  =   [ 
   '<ul class="list">'  , 
  arr .  join  (  ''  )  , 
   '</ul>'  , 
 ]  .  join  (  ''  )  ; 
 

数组的 join 方法 会将参数作为分隔符,将数组成员连接成 一个 字符串, 默 认的分隔符是逗号。

不论是制作 插件 ,还是业务需求的 页面 元素、文案调整,都需要拼接 HTML。

3.3 其他任意场景

通常字符串可以用在 任意场景 ,因为可以人为的赋予他任何含义。

如使用字符串的 'true' 、 'false' 来表示布尔值。

  var  isMan  =   'false'  ; 

 if   ( isMan  ===   'false'  )   { 
  console .  log  (  '不是男的'  )  ; 
 } 
 

或者可以使用字符串描述 一个 对象:

  var  person  =   '小明,男,24岁,吃饭、睡觉、打游戏'  ; 

name  =  person .  split  (  ','  )  [  ]  ; 

console .  log  ( name )  ; 
 

通过一定的规则来确定字符串的含义,如上面就是用逗号分隔,含义依次为 姓名,性别,年龄,爱好 。

取值的时候通过 split 方法 ,将字符串按指定的字符分隔成数组。

这种情况通常会用在 后台 需要存储简单的数据结构,前端拿到的数据也许就是这样的,需要自己切分。

正常情况下前端开发者在开发过程中不建议这样做,因为有更好的数据类型来描述这些 内容 ,JavaScript 提供了布尔值、对象来更好的、灵活的应对这些场景。

4. 访问字符串

字符串是无法 修改 的 ,只能进行访问。

  var  str  =   '我是字符串'  ; 

console .  log  ( str )  ;   //  输出 :"我是字符串" 
 

这是直接访问整个字符串,还可以访问中间某 一个 字符。

  var  str  =   '一二三四五六七,7654321'  ; 

 //  获取 第 一个 字符 
console .  log  ( str [  ]  )  ;   //  输出 :"一" 

 //  获取 最后 一个 字符 
console .  log  ( str [ str . length  -   ]  )  ;   //  输出 :"1" 
console .  log  ( str .  split  (  ''  )  .  pop  (  )  )  ;   //  输出 :"1" 
 

通过 字符串[下标] 的形式可以访问到某 一个 字符,这种访问通常会用在字符串遍历上。

5. 获取字符串 长度

字符串可以直接通过 length 属性 获取 长度。

  var  string  =   '1234567'  ; 

 var  len  =  string . length ; 

console .  log  ( len )  ;   //  输出 :7 
 

6. 常用的字符串拼接

6.1 使用 + 连接字符串

最常见的字符串拼接就是使用 + 符号:

  var  str1  =   '我是'  ; 
 var  str2  =   '小明'  ; 

console .  log  ( str1  +  str2 )  ; 
 

6.2 数组的 join 方法

还有一种是使用数组来拼接字符串:

  var  str1  =   '我是'  ; 
 var  str2  =   '一只鱼'  ; 

console .  log  (  [ str1 ,  str2 ]  .  join  (  ''  )  )  ;   //  输出 :我是一只鱼 
 

这种方式也很常见。

注意:许多文献中会提到这样拼接字符串的 性能 更好,效率更高。大部分浏览器确实如此,其引擎针对性的做了特殊优化,当然只有在非常大量的字符串拼接时才能感知到 性能 上的区别。

6.3 字符串的 concat 方法

  var  str1  =   '教练'  ; 
 var  str2  =   '我想'  ; 
 var  str3  =   '写 代码 '  ; 

 var  str4  =  str1 .  concat  ( str2 ,  str3 )  ; 

console .  log  ( str4 )  ; 
 

使用 concat 可以接受任意个字符串作为参数,最后会拼接成 一个 字符串。

ES6提供了模版字符串,在模版字符串中拼接更加灵活。

7. 使用 String 对象创建 字符串

String 对象也可以创建字符串,但不常用。

  var  str  =   new   String  (  'do sth.'  )  ; 

console .  log  (  typeof  str )  ;   //  输出 :object 
console .  log  ( str .  concat  (  'gugu'  )  )  ;   //  输出 :do sth.gugu 
 

可以观察到,使用 String 对象 生成 的字符串,实际上是 一个 对象 ,

但使用 String 对象 生成 的字符串对象使用的时候基本和字符串无异。这部分会涉及到部分装箱拆箱的知识,具体可以查阅相关章节。

8. 与字符串相关的常用 方法

以下是一些常用 方法 ,使用频率较高:

方法 描述 replace replace 方法 返回 一个 由替换值替换一些或所有匹配的模式后的新字符串。 match match 方法 检索返回 一个 字符串匹配正则表达式的的结果。 split split 方法 使用指定的分隔符字符串将 一个 String对象分割成子字符串数组,以 一个 指定的分割字串来决定每个拆分的位置 substring substring 方法 返回 一个 字符串在开始索引到结束索引之 间的 一个 子集, 或从开始索引直到字符串的末尾的 一个 子集。 toLocaleLowerCase toLocaleLowerCase 方法 根据任何指定区域语言环境设置的大小写映射,返回 调用 字符串被转换为小写的格式。 toLocaleUpperCase toLocaleUpperCase 使用本地化(locale-specific)的大小写 映射规则 将输入的字符串转化成大写形式并返回结果字符串。

8. 小结

字符串常常用于拼接 HTML ,且前端开发者习惯使用单引号来包裹字符串。

大量的字符串拼接,利用数组的 join 比使用 + 连接字符串 性能 更好,前提是非常大量。
使用 join 更大的好处是多行的时候换行方便。

字符串基本可以胜任任何数据场景,但一般不会这么做,因为 JavaScript 提供了多种数据类型来应对各种业务场景。

JavaScript 数字 ? ?JavaScript 对象

查看更多关于JavaScript 字符串的详细内容...

  阅读:64次

上一篇

下一篇

第1节:什么是 JavaScript    第2节:学习环境准备    第3节:调试方案    第4节:JavaScript 变量    第5节:JavaScript 数据类型    第6节:JavaScript if 语句    第7节:for 语句    第8节:JavaScript 算数运算符    第9节:JavaScript 比较运算符    第10节:JavaScript 逻辑运算符    第11节:JavaScript 函数    第12节:JavaScript 表达式    第13节:JavaScript 对象    第14节:JavaScript 字符串    第15节:JavaScript 数字    第16节:JavaScript 数组    第17节:JavaScript switch 语句    第18节:JavaScript while 语句    第19节:JavaScript 的 break 与 continue    第20节:JavaScript with    第21节:document.cookie    第22节:JavaScript Function    第23节:JavaScript Math    第24节:JavaScript Date    第25节:JavaScript RegExp    第26节:JavaScript JSON    第27节:什么是 DOM    第28节:DOM 和 JavaScript 的关系    第29节:获取和操作 DOM 节点    第30节:DOM 与事件    第31节:DOM 事件绑定    第32节:DOM 事件对象    第33节:DOM 事件流    第34节:事件相关的优化    第35节:自定义事件    第36节:表单校验    第37节:什么是 BOM    第38节:常用的 BOM 相关对象    第39节:BOM 常用属性和方法    第40节:AJAX    第41节:异常处理    第42节:三元运算符    第43节:逗号操作符    第44节:void    第45节:typeof    第46节:delete 操作符    第47节:debugger    第48节:getter & setter    第49节:new 运算符与构造函数    第50节:JavaScript 原型    第51节:JavaScript instanceof    第52节:JavaScript this    第53节:严格模式    第54节:作用域    第55节:闭包    第56节:变量提升    第57节:对象包装器    第58节:Lodash    第59节:moment    第60节:swiper    第61节:ECMAScript 6    第62节:Node.js    第63节:Babel    第64节:CSS 预处理器    第65节:代码规范    第66节:TypeScript    第67节:WebComponents    第68节:Vue、React、Angular    第69节:小程序    第70节:JavaScript 关键字    第71节:分号导致的问题    第72节:对象属性访问问题    第73节:this 使用问题    第74节:浮点数精度问题    第75节:独一无二的 NaN    第76节:避免全局污染    第77节:控制台观察对象问题    第78节:根据环境选择语言特性    第79节:相关资源