Maison  >  Article  >  interface Web  >  Une introduction aux connaissances super pratiques sur les cordes ES6

Une introduction aux connaissances super pratiques sur les cordes ES6

不言
不言avant
2019-03-11 16:33:181516parcourir

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"

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

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>
`;

 :

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)"

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"
2.includes(), StartWith() , EndsWith( )
let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

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

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) // ""

4.padStart(), padEnd()

padStart()

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

padEnd()

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'
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer