1. Cadeia de modelos
Strings de modelo são literais de string nos quais expressões podem ser inseridas. A comparação entre strings de modelo e strings tradicionais tem as seguintes características:
1. Use aspas crases
Literais de string tradicionais usam aspas simples '' ou aspas duplas "", e strings de modelo usam aspas crases ``
const str1 = 'hello world'
const str2 = `hello world`
console.log(str1, str2, str1 === str2)
// hello world, hello world, true
2. Inserir expressão
As expressões podem ser inseridas em strings de modelo na forma de ${expression}
expressão pode ser qualquer constante, variável ou chamada de função. Também pode haver quaisquer outros caracteres legais antes e depois de ${expression}, como `abc${expression}dfg`. Por fim, ${expression} é convertido em uma string e nas concatenações de string anteriores e seguintes, se houver.
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. As strings de modelo podem ter várias linhas de texto
Na string do modelo, quaisquer espaços, novas linhas ou recuos serão salvos na saída
// 一般字符串
const info = '第一行\n第二行'
// 模板字符串
const info = `第一行
第二行` // 注意不能有缩进
console.log(info)
/*
第一行
第二行
*/
2. Novos métodos para adicionar strings
Todos os métodos de string não alterarão a string original
1、inclui()、startsWith()、endsWith()
Tradicionalmente, o JavaScript possui apenas os métodos indexOf e lastIndexOf que podem ser usados para determinar se uma string está contida em outra string.
- str.indexOf(str, [start]): Índice de string, retorna a primeira posição de ocorrência do caractere de pesquisa na string, se não for encontrado, retorna -1. Começando do início da string, start indica a posição para iniciar a pesquisa e o padrão é 0 para o primeiro item.
- str.lastIndexOf(str, [start]): Índice de string, retorna a primeira posição de ocorrência do caractere de pesquisa na string, se não for encontrado, retorna -1. Começando no final da string, start indica a posição onde a pesquisa começa. Por padrão, a pesquisa começa em array.length-1.
ES6 adiciona três novos métodos:
- includes(): Retorna um valor booleano que indica se a string do parâmetro foi encontrada.
- startsWith(): Retorna um valor booleano que indica se a string do parâmetro está no início da string original.
- endsWith(): Retorna um valor booleano que indica se a string do parâmetro está no final da string 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()
O método repeat() retorna uma nova string, o que significa repetir a string original n vezes.
'x'.repeat(3) // 'xxx'
'hello'.repeat(2) // 'hellohello'
'na'.repeat(0) // ''
O que acontece quando os parâmetros de repetição não são números inteiros positivos e 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、padStart()、padEnd()
ES2017 introduz a função de comprimento de conclusão de string. Se uma string não tiver o comprimento especificado, ela será completada no início ou no final, e a string completa que atingir o comprimento especificado será retornada.
padStart(targetLength, [str]) é usado para completar o cabeçalho, padEnd(targetLength, [str]) é usado para completar o final. targetLength é o comprimento máximo para que a conclusão da string entre em vigor, str é a string usada para conclusão e o padrão é um espaço.
'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 comuns: especificação de dígitos para conclusão numérica, formato de string de prompt, formatação de data
// 生成 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、trimStart()、trimEnd()
Os dois métodos trimStart() e trimEnd() se comportam da mesma forma que trim(). trimStart() remove espaços no início da string e trimEnd() remove espaços no final. Eles retornam novas strings e não modificam as strings originais.
const s = ' abc '
s.trim() // 'abc'
s.trimStart() // 'abc '
s.trimEnd() // ' abc'
Além da barra de espaço, esses dois métodos também são eficazes para símbolos de espaço em branco invisíveis, como a tecla tab e caracteres de nova linha no início (ou no final) da string.
O navegador também implementa dois métodos adicionais, trimLeft() é um alias de trimStart() e trimRight() é um alias de trimEnd().
5、at()
O método at() aceita um número inteiro como parâmetro e retorna o caractere na posição especificada pelo parâmetro.Ele suporta índices negativos (ou seja, a posição recíproca).
const str = 'hello'
str.at(1) // 'e' （等价 str[1]）
str.at(-1) // 'o' （str[-1] 返回 undefined）
str.at(7) // undefined （等价 str[7]）
Se a posição do argumento exceder o intervalo da string, at() retornará indefinido.