[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设计规范