[TOC]
>[success] # 字符串
~~~
'Es6'新增了许多'字符串方法'
~~~
<br/>
>[success] ## codePointAt() 方法
~~~
'ES6'新出的方法,可以获取字符串的对应的'Unicode'码,例如:
~~~
~~~
var name = "小明"
console.log(name.codePointAt(0)) // 23567
console.log(name.codePointAt(1)) // 26126
或者用 'charCodeAt'方法也行
console.log(name.charCodeAt(0)) // 23567
console.log(name.charCodeAt(1)) // 26126
~~~
<br/>
>[success] ## String.fromCodePoint() 方法
~~~
'String.fromCodePoint()'方法可以将用'codePointAt()'取到的'code'转换为'字符串',例如:
~~~
~~~
console.log(String.fromCodePoint(23567)) // 小
console.log(String.fromCharCode(26126)) // 明
~~~
~~~
可以将 'String.fromCodePoint()' 视为 'String.fromCharCode()' 的完善版本。两者处理 'BMP' 字符时会返回
相同结果,只有处理 'BMP' 范围之外的字符时才会有差异。
~~~
<br/>
>[success] ## normalize()
这个就不详细写了,转载自CSDN:
https://blog.csdn.net/qq_42469247/article/details/88802479
>[success] ## 识别子字符串的方法
~~~
在'ES6'没出之前,判断'字符串'中是否包含某个字符,都是使用某个值'indexOf'是否等于'-1'的形式来判断的,
不过'ES6'现在出了3个新的判断字符串方法'includes()'、'startsWith()'、'endsWith()',他们三个都有第二
个参数
~~~
### includes()、startsWith()、endsWith()
~~~
'includes()'和'indexOf()'的不同处是'includes()'返回一个'布尔值',这个值为'true'就证明字'符串中'存
在你要找的项,反之不存在,但是'indexOf()'返回的是'数字型'如果这个值存在就返回这个值在字符串中的'索引值',
不存在就返回'-1','startsWith()','endsWith()',他们三个都有'第二个参数','includes()'也可以用来
判断'数组'中的某个值是否等于某个值,返回结果'布尔值'
~~~
~~~
var msg = "Hello.world!"
console.log(msg.startsWith("Hello")) // true
console.log(msg.endsWith("!")) // true
console.log(msg.includes("o")) // true
console.log(msg.startsWith("o")) // false
console.log(msg.endsWith("world!")) // true
console.log(msg.includes("x")) // false
console.log(msg.startsWith("o", 4)) // true
console.log(msg.endsWith("o", 8)) // true
console.log(msg.includes("o", 8)) // false
~~~
### repeat() 方法
~~~
可以'复制'一个字符串,如下:
~~~
<br/>
~~~
let str = '鸣子嘎'
str.repeat(2) // 鸣子嘎鸣子嘎
还有可以用来增加文本的缩进,下面的写法就类似于打了'4'个空格,然后又用'indentLevel'复制了指定的个数
// indent 使用了一定数量的空格
var indent = " ".repeat(4), indentLevel = 0
// 每当你增加缩进
var newIndent = indent.repeat(++indentLevel)
~~~
<br/>
>[success] ## 模板字面量(字符串模板)
~~~
let message = `hello world!`
console.log(message) // 'hello world'
console.log(typeof message) // 'string'
console.log(message.length) // 12
想在字符串中包含'反引号',只需使用'反斜杠( \ )'转义即可,在模板字模板中无需对'双引号'或'单引号'进行转义
let message = `\`hello\` world!`
console.log(message) // `hellow` world!
console.log(typeof message) // string
console.log(message.length) // 14
~~~
<br/>
>[success] ### 多行字符串
~~~
下面的例子,看着是换行了,其实没有换行,因为'反斜线'被视为'续延符号'而不是'新行'的符号
~~~
~~~
var message = "Multiline \
string"
console.log(message) // "Multiline string"
~~~
#### ES5的字符串换行方案
~~~
var message = [
'呵呵哒',
'奥利给'
].join('\n')
console.log(message) // 呵呵哒
// 奥利给
或者这么写:
let message = "呵呵哒 \n" + "奥利给"
console.log(message) // 呵呵哒
// 奥利给
~~~
#### ES6的字符串换行方案
~~~
这里需要注意的是'ES6'的'字符串模板'中会把所有的'空格'和'回车'都算在'length'中
~~~
~~~
let message = `呵呵哒
奥利给`
console.log(message) // 呵呵哒
// 奥利给
console.log(message.length) // 7
如果觉得这样的换行'不雅观'也可以使用'\n'来代替'回车'换行
let message = `Multiline\nstring`;
console.log(message) // Multiline
// string
~~~
~~~
下面的例子即使我在'div'标签后面增加了很多'空格',也会被'trim'方法去掉,如果说不想要'字符串'的
'首尾空格'和'回车'可以这样做:
~~~
~~~
let html = `
<div>
<h1>Title</h1>
</div> `.trim()
console.log(html.length) // 31
~~~
<br/>
>[success] ## 制造替换位(${})
~~~
'ES5'中如果想让'变量'或者'方法'和'字符串'拼接在以前需要这样写:
~~~
~~~
function test(){
return '456'
}
var a = '123' + test() + '789'
console.log(a) // 123456789
~~~
~~~
'ES6'中可以使用'${变量或方法}'来在'字符串模板'中直接使用
~~~
~~~
function test(){
return '456'
}
let a = `123${ test() }789`
console.log(a)
~~~
<br/>
>[success] ## 标签化模板
~~~
像下面这么写,静态数据'123456'会被当做test方法的'literals参数数组',并且数组的长度为'2',因为
'message'变量里面写了'${}',所以会被一个空字符串占用一个长度,'substitutions'参数是一个数组,
里面包含着'message'变量中所有'${}变量'的'数组集合'
~~~
~~~
/**
* 测试方法
* @param {array} literals - 静态字符串数组
* @param {array} y - '${}'动态数据的数组
*/
function test(literals,...substitutions){
console.log(literals,'静态数据数组') // [123456, '']
console.log(literals.length) // length为2,因为写${}会占用一个空字符串的长度
console.log(substitutions,'动态数据数组') // [789]
console.log(substitutions.length) // 1
}
let info = '789'
let message = test`123456${ info }`
~~~
<br/>
>[success] # 总结
<br/>
| ES7字符串方法| ES6字符串方法 | ES5字符串方法 | 说明 | 类型 | 可选值 | 默认值 | 返回值 |
| --- | --- | --- | --- | --- | --- | --- | --- |
|| codePointAt() | | 可以根据索引(index)获取字符串的对应的Unicode码 | function(index) | — | 0 | undefined / Unicode码 |
|| | charCodeAt() | 可以根据索引(index)获取字符串的对应的Unicode码 | function(index) | — | 0 | NaN / Unicode码
|| String.fromCodePoint() | | Unicode码转换成字符串 | function(string/number) | — | — | string |
|| normalize() | | [归一化函数](https://blog.csdn.net/Solomon1558/article/details/44689611) | — | — | — | — |
| includes() | | | ES7的遍历判断方法,与indexOf的不同处返回布尔值不返回索引值,字符串和数组可用 |基本数据类型 | — | — | true / false |
| startsWith() | | | 用来判断字符串是否以另外一个给定的子字符串开头 | — | — | true / false |—|
| endsWith() | | | 用来判断字符串是否以另外一个给定的子字符串结尾 | — | — | true / false |—|
| repeat() | | | 可以复制字符串,参数为要复制个数, 复制个数不能为负数 | number | — | —| —|
- Javascript基础篇
- Array数组
- 数组插入值
- filter()
- forEach()
- push()
- pop()
- unshift()
- shift()
- valueOf()
- 面向对象思想
- Javascript 面向对象编程(一):封装
- Javascript面向对象编程(二):构造函数的继承
- Javascript面向对象编程(三):非构造函数的继承
- 解构
- 数组的解构赋值
- 对象的解构赋值
- 函数参数解构
- 字符串的解构赋值
- 数值和布尔值的解构赋值
- 圆括号问题
- 字符串.
- split()
- charAt()
- charCodeAt()
- concat()
- indexOf()
- lastIndexOf()
- match()
- replace()
- includes()
- 初识递归
- 渲染ul-li树形结构
- 异步函数解决方案
- 1. callback回调函数
- 2. ES6 - Promise
- JavaScript高级程序设计(书)
- 在html中使用JavaScript
- script标签的位置
- 延迟脚本
- 异步脚本
- <noscript>元素
- 基本概念
- 严格模式
- 变量详解
- 数据类型
- typeof操作符
- undefined类型
- Null类型
- Boolean类型
- Number类型
- 深入了解ES6(书)
- var 、let 、 const
- 字符串与正则表达式
- 字符串
- 正则表达式
- 函数
- 函数形参默认值
- 使用不具名参数
- 函数构造器的增强能力
- 扩展运算符
- name属性
- 明确函数的多重用途
- 块级函数
- 箭头函数
- 尾调用优化
- 扩展的对象功能
- 对象类别
- 对象字面量语法的扩展
- ES6对象新增方法
- 重复的对象属性
- 自有属性的枚举顺序
- 更强大的原型
- 解构:更方便的数据访问
- 为什么要用解构?
- 对象解构
- 数组解构
- 混合解构
- 参数解构
- Symbol与Symbol属性
- 创建Symbol
- Symbol的使用方法
- Symbol全局私有属性
- Symbol与类型强制转换
- Symbol属性检索
- Symbol的一些构造方法
- Set集合与Map集合
- Set集合
- Weak Set集合(弱引用Set集合)
- Map集合
- JS标准内置对象
- Object 构造函数及属性
- Object 构造方法
- Symbol 内建对象类的函数及属性
- Set 构造函数及属性
- Weak Set 构造函数及属性
- JS杂项
- 类数组对象
- Class类的理解和使用