[TOC]
# 基本概念
JavaScript的字符串就是用`''`(半角的單引號)、`""`(半角的雙引號)或者反引號(鍵盤上Esc鍵下方那個鍵)括起來的字符表示。
如果`'`本身也是一個字符,那就可以用`""`括起來,比如`"I'm OK"`包含的字符是`I`,`'`,`m`,空格,`O`,`K`這6個字符。
如果字符串內部既包含`'`又包含`"`怎么辦?可以用轉義字符`\`來標識,比如:
~~~
'I\'m \"OK\"!';
~~~
表示的字符串內容是:`I'm "OK"!`
轉義字符`\`可以轉義很多字符,比如`\n`表示換行,`\t`表示制表符,字符`\`本身也要轉義,所以`\\`表示的字符就是`\`。
ASCII字符可以以`\x##`形式的十六進制表示,例如:
~~~
'\x41'; // 完全等同于 'A'
~~~
還可以用`\u####`表示一個Unicode字符:
~~~
'\u4e2d\u6587'; // 完全等同于 '中文'
~~~
由于多行字符串用`\n`寫起來比較費事,所以最新的ES6標準新增了一種多行字符串的表示方法,用反引號表示:
~~~
`這是一個
多行
字符串`;
~~~
# 模板字符串
模板字符串可以用于基本的字符串格式化,將表達式嵌入字符串中進行拼接。ES6反引號(``)直接搞定,模板字符串用${}來界定變量。
```js
const name = 'Jack'
let message=`Hello, ${name}.`;
console.log(message);//輸出:Hello, Jack.
```
練習:測試你的瀏覽器是否支持ES6標準,如果不支持,請把多行字符串用`\n`重新表示出來:
~~~
// 如果瀏覽器不支持ES6,將報SyntaxError錯誤:
alert(`多行
字符串
測試`);
~~~
# 字符串常見的操作
## 計算字符串的長度
~~~
var s = 'Hello, world!';
s.length; // 13
~~~
## 字符串索引
要獲取字符串某個指定位置的字符,使用類似Array的下標操作,索引號從0開始:
~~~
var s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范圍的索引不會報錯,但一律返回undefined
~~~
*需要特別注意的是*,字符串是不可變的,如果對字符串的某個索引賦值,不會有任何錯誤,但是,也沒有任何效果:
~~~
var s = 'Test';
s[0] = 'X';
alert(s); // s仍然為'Test'
~~~
JavaScript為字符串提供了一些常用方法,注意,調用這些方法本身不會改變原有字符串的內容,而是返回一個新字符串:
## toUpperCase
`toUpperCase()`把一個字符串全部變為大寫:
~~~
var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'
~~~
## toLowerCase
`toLowerCase()`把一個字符串全部變為小寫:
~~~
var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'并賦值給變量lower
lower; // 'hello'
~~~
## indexOf
`indexOf()`會搜索指定字符串出現的位置:
~~~
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 沒有找到指定的子串,返回-1
~~~
## substring
substring() 方法用于提取字符串中介于兩個指定下標之間的字符。
~~~
var s = 'hello, world'
s.substring(0, 5); // 從索引0開始到5(不包括5),返回'hello'
s.substring(7); // 從索引7開始到結束,返回'world'
~~~
## substr
substr() 方法可在字符串中抽取從*start*下標開始的指定數目的字符。
# 實踐
編程實現以下功能:
* [ ] 鍵盤輸入一行字符串,反轉之后顯示出來
參考解答:
```javascript
function reversedMessage(message) {
return message.split('').reverse().join('')
}
```
- 內容介紹
- EcmaScript基礎
- 快速入門
- 常量與變量
- 字符串
- 函數的基本概念
- 條件判斷
- 數組
- 循環
- while循環
- for循環
- 函數基礎
- 對象
- 對象的方法
- 函數
- 變量作用域
- 箭頭函數
- 閉包
- 高階函數
- map/reduce
- filter
- sort
- Promise
- 基本對象
- Arguments 對象
- 剩余參數
- Map和Set
- Json基礎
- RegExp
- Date
- async
- callback
- promise基礎
- promise-api
- promise鏈
- async-await
- 項目實踐
- 標簽系統
- 遠程API請求
- 面向對象編程
- 創建對象
- 原型繼承
- 項目實踐
- Classes
- 構造函數
- extends
- static
- 項目實踐
- 模塊
- import
- export
- 項目實踐
- 第三方擴展庫
- immutable
- Vue快速入門
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入門
- 模板語法
- 計算屬性和偵聽器
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 組件注冊
- Prop
- 自定義事件
- 插槽
- 混入
- 過濾器
- 項目實踐
- 標簽編輯
- 移動客戶端開發
- uni-app基礎
- 快速入門程序
- 單頁程序
- 底部Tab導航
- Vue語法基礎
- 模版語法
- 計算屬性與偵聽器
- Class與Style綁定
- 樣式與布局
- Box模型
- Flex布局
- 內置指令
- 基本指令
- v-model與表單
- 條件渲染指令
- 列表渲染指令v-for
- 事件與自定義屬性
- 生命周期
- 項目實踐
- 學生實驗
- 貝店商品列表
- 加載更多數據
- 詳情頁面
- 自定義組件
- 內置組件
- 表單組件
- 技術專題
- 狀態管理vuex
- Flyio
- Mockjs
- SCSS
- 條件編譯
- 常用功能實現
- 上拉加載更多數據
- 數據加載綜合案例
- Teaset UI組件庫
- Teaset設計
- Teaset使用基礎
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代碼模版
- 項目實踐
- 標簽組件
- 失物招領客戶端原型
- 發布頁面
- 檢索頁面
- 詳情頁面
- 服務端開發技術
- 服務端開發環境配置
- Koajs快速入門
- 快速入門
- 常用Koa中間件介紹
- 文件上傳
- RestfulApi
- 一個復雜的RESTful例子
- 使用Mockjs生成模擬數據
- Thinkjs快速入門
- MVC模式
- Thinkjs介紹
- 快速入門
- RESTful服務
- RBAC案例
- 關聯模型
- 應用開發框架
- 服務端開發
- PC端管理界面開發
- 移動端開發
- 項目實踐
- 失物招領項目
- 移動客戶端UI設計
- 服務端設計
- 數據庫設計
- Event(事件)
- 客戶端設計
- 事件列表頁面
- 發布頁面
- 事件詳情頁面
- API設計
- image
- event
- 微信公眾號開發
- ui設計規范