ES6 - いくつかの一般的なメソッドが文字列に追加されました

記事ディレクトリ

0、いくつかの新しいメソッド

ES6 文字列オブジェクトによって新たに追加された一般的なメソッドをいくつか紹介します。

メソッド名	説明する
`includes()`	引数文字列が見つかったかどうかを示すブール値を返します。
`startsWith()`	パラメータ文字列が元の文字列の先頭にあるかどうかを示すブール値を返します。
`endsWith()`	引数の文字列が元の文字列の末尾にあるかどうかを示すブール値を返します。
`repeat()`	`repeat`このメソッドは新しい文字列を返します。これは、元の文字列を繰り返すことを意味します`n`。
`padStart()`	これはヘッダーの補完に使用され、最初のパラメータは補完が有効になる最大長で、2 番目のパラメータは補完に使用される文字列です。
`padEnd()`	これは末尾補完に使用され、最初のパラメータは補完が有効になる最大長で、2 番目のパラメータは補完に使用される文字列です。
`trimStart()`	文字列の先頭からスペースを削除する
`trimEnd()`	末尾のスペースを削除する
`replace()`	最初に一致した文字のみを置換できます
`replaceAll()`	一致するすべての文字を一度に置き換えることができます
`at()`	パラメータで指定されたインデックス位置にある文字を返します。負のインデックス (つまり、逆数の位置) をサポートします。

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

従来、JavaScript には、indexOf文字列が別の文字列内に含まれているかどうかを判断するために使用できるメソッドしかありませんでした。ES6 は 3 つの新しいメソッドを提供します。

include() : 引数文字列が見つかったかどうかを示すブール値を返します。
startsWith() : パラメータ文字列が元の文字列の先頭にあるかどうかを示すブール値を返します。
opensWith() : パラメータ文字列が元の文字列の末尾にあるかどうかを示すブール値を返します。

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

3 つのメソッドはすべて、検索を開始する場所を示す 2 番目のパラメーターをサポートしています。

      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

上記のコードは、2 番目のパラメーターが使用された場合の動作が他の 2 つのメソッドとは異なることを示していnますendsWith。これは最初のn文字に作用しますが、他の 2 つのメソッドは最初のn位置から文字列の終わりまで作用します。

2，リピート()

repeatこのメソッドは新しい文字列を返します。これは、元の文字列を繰り返すことを意味しますn。

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

次のように出力されます。

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

パラメータが小数の場合は切り上げられます。

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

repeatパラメータが負の値またはの場合Infinity、エラーが報告されます。

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

ただし、引数が 0 から -1 までの小数の場合は、丸めが最初に行われるため、0 と同等になります。0 から -1 までの小数は、四捨五入-0後の0 と等しくなりますrepeat。

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

引数が文字列の場合はrepeat、まず数値に変換されます。

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

3、padStart()、padEnd()

文字列補完長の関数。文字列の長さが足りない場合は、先頭または末尾で完成します。padStart()頭の完成用、padEnd()尾の完成用。

基本的な使い方:

padStart()合計 2 つのパラメータを受け入れますpadEnd()。最初のパラメータは文字列補完の最大長で、2 番目のパラメータは補完に使用される文字列です。

   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

補完に使用した文字列と元の文字列の長さの合計が最大長を超える場合、桁数を超えた補完文字列は切り捨てられます。

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

2 番目のパラメータを省略した場合、デフォルトで長さはスペースで埋められます。

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

padStart()0の一般的な使用法は、次の場合に、日付と月の前を埋めることです。

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

trimStart()これら 2 つのメソッドを追加しましたtrimEnd()。これらはtrim()と同じように動作し、trimStart()文字列から先頭の空白を削除し、trimEnd()末尾の空白を削除します。これらはすべて新しい文字列を返し、元の文字列は変更しません。

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

上記のコードでは、trimStart()先頭のスペースのみが削除され、末尾のスペースは保持されます。trimEnd()も同様の動作です。

これら 2 つの方法は、スペースキーに加えて、タブキーや文字列の先頭 (または末尾) の改行などの目に見えない空白記号にも有効です。

5，すべて置き換え()

以前は、String のインスタンスメソッドはreplace()最初に一致したもののみを置き換えることができました。

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

上の例では、replace()最初の文字だけがbアンダースコアに置き換えられます。

すべての一致を置き換える場合は、正規表現g修飾子を使用する必要があります。

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

結局のところ、正規表現はそれほど便利で直感的ではないため、ES6 ではreplaceAll()すべての一致を一度に置き換えるメソッドが導入されました。

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

これはとreplace()同じ方法で使用され、元の文字列を変更せずに新しい文字列を返します。

String.prototype.replaceAll(searchValue, replacement)

searchValue修飾子のないg正規表現の場合、replaceAll()エラーが報告されます。これはreplace()違います。

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

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

上の例では、修飾子を/b/指定しないとg、エラーが報告されますreplaceAll()。

replaceAll()の 2 番目のパラメータreplacementは、置換されたテキストを表す文字列で、いくつかの特別な文字列を使用できます。

$&: 照合する文字列。
$`: 結果の前のテキストと一致します。
$': 一致結果に続くテキスト。
$nn: 最初に一致したグループの内容はn1 から始まる自然数です。このパラメータを有効にするための前提条件は、最初のパラメータが正規表現である必要があることです。
$$: ドル記号を指します$。

以下にいくつかの例を示します。

// $& 表示匹配的字符串，即`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()の2 番目のパラメータは文字列のほかreplacementに関数にすることもでき、この関数の戻り値はsearchValue最初のパラメータに一致するテキストを置き換えます。

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

上の例では、replaceAll()の 2 番目のパラメーターは、戻り値がすべての一致を置き換える関数ですb。

6，()で

at()このメソッドは整数をパラメータとして受け入れ、パラメータで指定された位置にある文字を返し、負のインデックス (つまり、逆数の位置) をサポートします。

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

パラメータの位置が文字列の範囲外の場合は、at()戻り値を返します。undefined

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