Maison > interface Web > js tutoriel > le corps du texte

Une introduction aux connaissances super pratiques sur les cordes ES6

不言
Libérer: 2019-03-11 16:33:18
avant
1571 Les gens l'ont consulté

Le contenu de cet article est une introduction très pratique aux chaînes ES6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Chaîne de modèle

1. Vous pouvez écrire des chaînes multilignes

2 Utilisez ${} pour ajouter des variables

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"
Copier après la connexion

Chaîne de modèle Vous. peut également appeler des fonctions dans des chaînes de modèles

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar
Copier après la connexion

et même imbriquer des modèles de balises

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;
Copier après la connexion

 :

let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {
  let result = '';
  let i = 0;

  while (i < literals.length) {
    result += literals[i++];
    if (i < arguments.length) {
      result += arguments[i];
    }
  }

  return result;
}

msg // "The total is 30 (31.5 with tax)"
Copier après la connexion

les paramètres littéraux sont composés de non-variables Pour les tableaux , la position d'origine des variables se situe entre les éléments du tableau. L'exemple ci-dessus montre comment reconstituer les différents paramètres en fonction de leurs positions d'origine.

  • Une application importante du « modèle de balise » consiste à filtrer les chaînes HTML pour empêcher les utilisateurs de saisir du contenu malveillant.

Ensemble de méthodes utilitaires

1. Interface de traversée de chaînes
for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"
Copier après la connexion
2.includes(), StartWith() , EndsWith( )
let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
Copier après la connexion

Les trois méthodes prennent en charge un deuxième paramètre, indiquant la position de départ de la recherche.

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
Copier après la connexion

Le code ci-dessus indique que lors de l'utilisation du deuxième paramètre n, endWith se comporte différemment des deux autres méthodes. Elle cible les n premiers caractères, tandis que les deux autres méthodes ciblent la nième position jusqu'à la fin de la chaîne.

3.repeat()

La méthode de répétition renvoie une nouvelle chaîne, ce qui signifie répéter la chaîne d'origine n fois.

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
Copier après la connexion

4.padStart(), padEnd()

padStart()
Copier après la connexion

est utilisé pour l'achèvement de la tête et

padEnd()
Copier après la connexion

est utilisé pour l'achèvement de la queue.

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
Copier après la connexion
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal