ES6 – Einige gängige Methoden zu Strings hinzugefügt

0, einige neue Methoden

Stellen Sie einige gängige Methoden vor, die durch ES6-String-Objekte neu hinzugefügt wurden.

Methodenname	beschreiben
includes()	Gibt einen booleschen Wert zurück, der angibt, ob die Argumentzeichenfolge gefunden wurde
startsWith()	Gibt einen booleschen Wert zurück, der angibt, ob sich die Parameterzeichenfolge am Anfang der ursprünglichen Zeichenfolge befindet
endsWith()	Gibt einen booleschen Wert zurück, der angibt, ob sich die Argumentzeichenfolge am Ende der ursprünglichen Zeichenfolge befindet
repeat()	repeatDie Methode gibt eine neue Zeichenfolge zurück, was bedeutet, dass die ursprüngliche Zeichenfolge wiederholt wird n.
padStart()	Es wird für die Header-Vervollständigung verwendet. Der erste Parameter gibt die maximale Länge an, damit die Vervollständigung wirksam wird, und der zweite Parameter ist die Zeichenfolge, die für die Vervollständigung verwendet wird
padEnd()	Es wird für die Endvervollständigung verwendet. Der erste Parameter ist die maximale Länge, damit die Vervollständigung wirksam wird, und der zweite Parameter ist die für die Vervollständigung verwendete Zeichenfolge
trimStart()	Entfernen Sie Leerzeichen vom Anfang einer Zeichenfolge
trimEnd()	Entfernen Sie nachgestellte Leerzeichen
replace()	Es kann nur das erste passende Zeichen ersetzt werden
replaceAll()	Kann alle passenden Zeichen auf einmal ersetzen
at()	Gibt das Zeichen an der durch den Parameter angegebenen Indexposition zurück und unterstützt einen negativen Index (d. h. die reziproke Position).

1，includes()、startsWith()、endsWith()

Traditionell verfügt JavaScript nur über indexOfMethoden, mit denen festgestellt werden kann, ob eine Zeichenfolge in einer anderen Zeichenfolge enthalten ist. ES6 bietet drei neue Methoden;

• Includes() : Gibt einen booleschen Wert zurück, der angibt, ob die Argumentzeichenfolge gefunden wurde.
• startetWith() : Gibt einen booleschen Wert zurück, der angibt, ob sich die Parameterzeichenfolge am Anfang der ursprünglichen Zeichenfolge befindet.
• endWith() : Gibt einen booleschen Wert zurück, der angibt, ob sich die Parameterzeichenfolge am Ende der ursprünglichen Zeichenfolge befindet.

      let like = "Eula - Amber";
      console.log( like.startsWith("Eula"));// true
      console.log( like.endsWith("Amber")); // true
      console.log(like.includes("-"));      // true

Alle drei Methoden unterstützen einen zweiten Parameter, der angibt, wo die Suche beginnen soll.

      let like2 = "Kaya"
      console.log(like2.startsWith("K",0)); // true
      console.log(like2.endsWith("a",2)); // true 针对前n个字符中查找
      console.log(like2.endsWith("a",4)); // true 针对前n个字符中查找
      console.log(like2.includes("y",2)); // true 

nDer obige Code zeigt an , dass sich das Verhalten bei Verwendung des zweiten Parameters endsWithvon den beiden anderen Methoden unterscheidet. Sie funktioniert beim ersten nZeichen, während die anderen beiden Methoden von der ersten nPosition bis zum Ende der Zeichenfolge funktionieren.

2, wiederholen()

repeatDie Methode gibt eine neue Zeichenfolge zurück, was bedeutet, dass die ursprüngliche Zeichenfolge wiederholt wird n.

      console.log("*".repeat(50));
      console.log("|==".repeat(18)); 
      console.log("Eula-".repeat(10)); 
      console.log("*".repeat(50));

Es wird wie folgt gedruckt:

**************************************************
|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==|==
Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-Eula-
**************************************************

Wenn der Parameter eine Dezimalzahl ist, wird er aufgerundet.

 console.log('xiao'.repeat(2.1));//xiaoxiao
 console.log('xiao'.repeat(2.9));//xiaoxiao

Wenn repeatder Parameter negativ oder ist Infinity, wird ein Fehler gemeldet.

 console.log('xiao'.repeat(Infinity));//Invalid count value: Infinity
 console.log('xiao'.repeat(-1));//  Invalid count value: -1

Wenn das Argument jedoch eine Dezimalzahl zwischen 0 und -1 ist, entspricht es 0, da zuerst gerundet wird. -0Dezimalstellen zwischen 0 und -1 sind nach dem Runden gleich 0 repeat.

 console.log('xiao'.repeat(-0.9) ); // ""  空串

Wenn repeatdas Argument eine Zeichenfolge ist, wird es zunächst in eine Zahl umgewandelt.

 console.log('xiao'.repeat('aa')); // ""  空串
 console.log('xiao'.repeat('3') );// xiaoxiaoxiao

3、padStart()、padEnd()

Die Funktion der String-Vervollständigungslänge. Wenn eine Zeichenfolge nicht lang genug ist, wird sie am Anfang oder am Ende vervollständigt. padStart()Zur Kopfvervollständigung, padEnd()zur Schwanzvervollständigung.

Grundlegende Verwendung:

padStart()und padEnd()akzeptiert insgesamt zwei Parameter. Der erste Parameter ist die maximale Länge der Zeichenfolgenvervollständigung und der zweite Parameter ist die zur Vervollständigung verwendete Zeichenfolge.

   console.log("x".padStart(2,0));// 0x
   console.log("x".padStart(5,0));// 0000x
   console.log("x".padEnd(2,'0'));// x0
   console.log("x".padEnd(5,'0'));// x0000

Wenn die Summe der Längen der zur Vervollständigung verwendeten Zeichenfolge und der ursprünglichen Zeichenfolge die maximale Länge überschreitet, wird die vervollständigte Zeichenfolge, deren Anzahl die Anzahl der Ziffern überschreitet, abgeschnitten.

'abc'.padStart(10, '0123456789')
// '0123456abc'

Wenn der zweite Parameter weggelassen wird, wird die Länge standardmäßig mit Leerzeichen aufgefüllt.

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart()Eine übliche Verwendung besteht darin, das Datum und den Monat voranzustellen 0; in den folgenden Fällen:

  let str = new Date();
  console.log(new Date().toLocaleDateString()); // 2023/8/2
  let month = (str.getMonth() + 1).toString();
  console.log(month.padStart(2, "0")); // 08

4，trimStart()、trimEnd()

Hinzugefügt trimStart()und trimEnd()diese beiden Methoden. Sie verhalten sich trim()genauso wie , trimStart()entfernen führende Leerzeichen aus der Zeichenfolge und trimEnd()entfernen nachgestellte Leerzeichen. Sie alle geben neue Zeichenfolgen zurück und ändern die ursprüngliche Zeichenfolge nicht.

      const lik3 = "  Eula  ";
      console.log( lik3.trim());      // 'Eula'
      console.log( lik3.trimStart()); // 'Eula  '
      console.log( lik3.trimEnd());   // '   Eula'

Im obigen Code trimStart()werden nur die führenden Leerzeichen entfernt und die nachgestellten Leerzeichen bleiben erhalten. trimEnd()ist auch ein ähnliches Verhalten.

Neben der Leertaste gelten diese beiden Methoden auch für unsichtbare Leerzeichen wie die Tabulatortaste und den Zeilenumbruch am Anfang (oder Ende) der Zeichenfolge.

5，replaceAll()

Bisher konnten Instanzmethoden für String replace()nur die erste Übereinstimmung ersetzen.

'aabbcc'.replace('b', '_')
// 'aa_bcc'

Im obigen Beispiel replace()wird nur der erste bdurch einen Unterstrich ersetzt.

Wenn Sie alle Übereinstimmungen ersetzen möchten, müssen Sie gModifikatoren für reguläre Ausdrücke verwenden.

'aabbcc'.replace(/b/g, '_')
// 'aa__cc'

Schließlich sind reguläre Ausdrücke nicht so praktisch und intuitiv. ES6 führt replaceAll()Methoden ein, um alle Übereinstimmungen auf einmal zu ersetzen.

'aabbcc'.replaceAll('b', '_')
// 'aa__cc'

Es wird auf replace()die gleiche Weise verwendet wie und gibt eine neue Zeichenfolge zurück, ohne die ursprüngliche Zeichenfolge zu ändern.

String.prototype.replaceAll(searchValue, replacement)

Wenn es sich um einen regulären Ausdruck searchValueohne Modifikatoren handelt, wird ein Fehler gemeldet. Das ist anders.greplaceAll()replace()

// 不报错
'aabbcc'.replace(/b/, '_')

// 报错
'aabbcc'.replaceAll(/b/, '_')

Im obigen Beispiel wird /b/ohne Modifikatoren ein Fehler gemeldet .greplaceAll()

replaceAll()Der zweite Parameter von replacementist eine Zeichenfolge, die den ersetzten Text darstellt, wobei einige spezielle Zeichenfolgen verwendet werden können.

• $&: Die zu vergleichende Zeichenfolge.
• $`: Entspricht dem Text vor dem Ergebnis.
• $': Der Text, der auf das passende Ergebnis folgt.
• $n: Der Inhalt der ersten übereinstimmenden nGruppe nist eine natürliche Zahl beginnend bei 1. Voraussetzung für die Wirksamkeit dieses Parameters ist, dass der erste Parameter ein regulärer Ausdruck ist.
• $$: Bezieht sich auf das Dollarzeichen $.

Nachfolgend finden Sie einige Beispiele.

// $& 表示匹配的字符串，即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'

// $` 表示匹配结果之前的字符串
// 对于第一个`b`，$` 指代`a`
// 对于第二个`b`，$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'

// $' 表示匹配结果之后的字符串
// 对于第一个`b`，$' 指代`bc`
// 对于第二个`b`，$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'

// $1 表示正则表达式的第一个组匹配，指代`ab`
// $2 表示正则表达式的第二个组匹配，指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'

// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'

replaceAll()Der zweite Parameter von replacementkann nicht nur eine Zeichenfolge sein, sondern auch eine Funktion. Der Rückgabewert dieser Funktion ersetzt searchValueden mit dem ersten Parameter übereinstimmenden Text.

'aabbcc'.replaceAll('b', () => '_')
// 'aa__cc'

Im obigen Beispiel replaceAll()ist der zweite Parameter von eine Funktion, deren Rückgabewert alle Übereinstimmungen ersetzt b.

6,at()

at()Die Methode akzeptiert eine Ganzzahl als Parameter, gibt das Zeichen an der durch den Parameter angegebenen Position zurück und unterstützt negative Indizes (d. h. die Position des Kehrwerts).

  const str = "Eula";
  console.log( str.at(1)); // E
  console.log( str.at(1)); // u
  console.log( str.at(-1));// a

Wenn die Parameterposition außerhalb des Bereichs der Zeichenfolge liegt, at()kehren Sie zurückundefined

  console.log( str.at(10)); // undefined