Eine super praktische Wissenseinführung in ES6-Saiten

Dieser Artikel bietet Ihnen eine sehr praktische Wissenseinführung über ES6-Saiten. Ich hoffe, dass er Ihnen als Referenz dienen wird.

Vorlagenzeichenfolge

1. Sie können mehrzeilige Zeichenfolgen schreiben

2. Verwenden Sie ${}, um Variablen hinzuzufügen

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"

Es gibt auch Vorlagenzeichenfolgen Die Funktion

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

`foo ${fn()} bar`
// foo Hello World bar

-Vorlagenzeichenfolge kann aufgerufen werden und sogar die

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

-Tag-Vorlage kann verschachtelt werden: Der Parameter

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

literals ist ein Array von Nichtvariablen und das Original Die Position der Variablen liegt im Array. Zwischen den einzelnen Elementen zeigt das obige Beispiel, wie die verschiedenen Parameter entsprechend ihrer ursprünglichen Positionen wieder zusammengesetzt werden.

• Eine wichtige Anwendung der „Tag-Vorlage“ besteht darin, HTML-Zeichenfolgen zu filtern, um zu verhindern, dass Benutzer schädliche Inhalte eingeben.

Utility-Methodensatz

1. String-Traverser-Schnittstelle

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

2.includes(), getsWith(), endWith()

let s = 'Hello world!';

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

Alle drei Methoden unterstützen einen zweiten Parameter, der die Startposition der Suche angibt.

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

Der obige Code zeigt an, dass sich endWith bei Verwendung des zweiten Parameters n anders verhält als die beiden anderen Methoden. Es zielt auf die ersten n Zeichen ab, während die anderen beiden Methoden von der n-ten Position bis zum Ende der Zeichenfolge zielen.

3.repeat()

Die Wiederholungsmethode gibt eine neue Zeichenfolge zurück, was bedeutet, dass die ursprüngliche Zeichenfolge n-mal wiederholt wird.

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

4.padStart(), padEnd()

padStart()

wird für die Kopfvervollständigung und

padEnd()

für die Schwanzvervollständigung verwendet.

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

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

rrree

Das obige ist der detaillierte Inhalt vonEine super praktische Wissenseinführung in ES6-Saiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!