1. Cadena de plantilla
Las cadenas de plantilla son cadenas literales en las que se pueden insertar expresiones. La comparación entre cadenas de plantilla y cadenas tradicionales tiene las siguientes características:
1. Utilice comillas invertidas
Los literales de cadena tradicionales usan comillas simples '' o comillas dobles "", y las cadenas de plantilla usan comillas invertidas ``
const str1 = 'hello world'
const str2 = `hello world`
console.log(str1, str2, str1 === str2)
// hello world, hello world, true
2. Insertar expresión
Las expresiones se pueden insertar en cadenas de plantilla en forma de ${expresión}
La expresión puede ser cualquier constante, variable o llamada a función. También puede haber otros caracteres legales antes y después de ${expression}, como `abc${expression}dfg`. En última instancia, ${expression} se convierte en una cadena y las concatenaciones de cadenas anteriores y siguientes, si las hay.
const person = {
name: '小明',
age: 14,
sex: '男'
}
// 传统字符串写法
const info =
'姓名是：' + person.name +
', 年龄是：' + person.age +
', 性别：' + person.sex
// 模板字符串写法
// const info = `姓名是：${person.name}, 年龄是：${person.age}, 性别：${person.sex}`
console.log(info)
// 姓名是：小明, 年龄是：14, 性别：男
3. Las cadenas de plantilla pueden tener varias líneas de texto.
En la cadena de plantilla, cualquier espacio, nueva línea o sangría se guardará en la salida.
// 一般字符串
const info = '第一行\n第二行'
// 模板字符串
const info = `第一行
第二行` // 注意不能有缩进
console.log(info)
/*
第一行
第二行
*/
2. Nuevos métodos para agregar cadenas.
Todos los métodos de cadena no cambiarán la cadena original.
1、incluye()、empiezaCon()、terminaCon()
Tradicionalmente, JavaScript solo ha tenido métodos indexOf y lastIndexOf que pueden usarse para determinar si una cadena está contenida dentro de otra cadena.
- str.indexOf(str, [start]): índice de cadena, devuelve la primera posición de aparición del carácter de búsqueda en la cadena; si no se encuentra, devuelve -1. Comenzando desde el principio de la cadena, inicio indica la posición para comenzar la búsqueda y el valor predeterminado es 0 para el primer elemento.
- str.lastIndexOf(str, [start]): índice de cadena, devuelve la primera posición de aparición del carácter de búsqueda en la cadena; si no se encuentra, devuelve -1. Comenzando desde el final de la cadena, inicio indica la posición donde comienza la búsqueda. De forma predeterminada, la búsqueda comienza desde array.length-1.
ES6 agrega tres nuevos métodos:
- includes(): devuelve un valor booleano que indica si se encuentra la cadena del parámetro.
- startsWith(): devuelve un valor booleano que indica si la cadena del parámetro está al principio de la cadena original.
- endsWith(): devuelve un valor booleano que indica si la cadena del parámetro está al final de la cadena original.
let s = 'Hello world!'
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
// 这三个方法都支持第二个参数，表示开始搜索的位置。
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
2、repetir()
El método repetir() devuelve una nueva cadena, lo que significa repetir la cadena original n veces.
'x'.repeat(3) // 'xxx'
'hello'.repeat(2) // 'hellohello'
'na'.repeat(0) // ''
¿Qué sucede cuando los parámetros de repetición no son números enteros positivos y 0?
// 参数是小数，会被取整
'na'.repeat(2.9) // 'nana'
// 参数是负数或者 Infinity，会报错
'na'.repeat(Infinity) // RangeError
'na'.repeat(-1) // RangeError
// 参数是 0 到-1 之间的小数，则等同于 0。因为会先进行取整运算，取整以后等于 -0，repeat 视同为 0。
'na'.repeat(-0.9) // ''
// 参数 NaN 等同于 0
'na'.repeat(NaN) // ''
// 参数是字符串，则会先转换成数字
'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'
3、padInicio()、padEnd()
ES2017 introduce la función de longitud de finalización de cadena. Si una cadena no tiene la longitud especificada, se completará al principio o al final y se devolverá la cadena completa que alcance la longitud especificada.
padStart(targetLength, [str]) se usa para completar la cabeza, padEnd(targetLength, [str]) se usa para completar la cola. targetLength es la longitud máxima para que la finalización de la cadena surta efecto, str es la cadena utilizada para la finalización y el valor predeterminado es un espacio.
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
// 如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xx'.padEnd(2, 'ab') // 'xx'
// 如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789') // '0123456abc'
Usos comunes: especificación de dígitos para completar números, formato de cadena de mensajes, formato de fecha
// 生成 10 位的数值字符串
'1'.padStart(10, '0') // '0000000001'
'12'.padStart(10, '0') // '0000000012'
'123456'.padStart(10, '0') // '0000000012'
'12'.padStart(10, 'YYYY-MM-DD') // 'YYYY-MM-12'
'09-12'.padStart(10, 'YYYY-MM-DD') // 'YYYY-09-12'
/**
* 格式化日期
* @param {Object} date new Date()
* @param {Object} fmt 格式、'YYYY年mm月dd日 HH:MM:SS'
*/
export const dataFormat = (date, fmt) => {
let ret
const opt = {
'Y+': date.getFullYear().toString(), // 年
'm+': (date.getMonth() + 1).toString(), // 月
'd+': date.getDate().toString(), // 日
'H+': date.getHours().toString(), // 时
'M+': date.getMinutes().toString(), // 分
'S+': date.getSeconds().toString() // 秒
}
for (let k in opt) {
ret = new RegExp('(' + k + ')').exec(fmt)
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
}
}
return fmt
}
4、recortarInicio()、recortarFin()
Los dos métodos trimStart() y trimEnd() se comportan igual que trim(): trimStart() elimina espacios al principio de la cadena y trimEnd() elimina espacios al final. Devuelven cadenas nuevas y no modifican las cadenas originales.
const s = ' abc '
s.trim() // 'abc'
s.trimStart() // 'abc '
s.trimEnd() // ' abc'
Además de la barra espaciadora, estos dos métodos también son efectivos para símbolos de espacios en blanco invisibles, como la tecla de tabulación y los caracteres de nueva línea al principio (o al final) de la cadena.
El navegador también implementa dos métodos adicionales, trimLeft() es un alias de trimStart() y trimRight() es un alias de trimEnd().
5、en()
El método at() acepta un número entero como parámetro y devuelve el carácter en la posición especificada por el parámetro. Admite índices negativos (es decir, la posición recíproca).
const str = 'hello'
str.at(1) // 'e' （等价 str[1]）
str.at(-1) // 'o' （str[-1] 返回 undefined）
str.at(7) // undefined （等价 str[7]）
Si la posición del argumento excede el rango de la cadena, at() devuelve indefinido.