JavaScript面接でよく受ける文字列の操作方法大全書（ES 6を含む）

一、charAt（）
指定された位置の文字を返します。

var str="abc"
console.log(str.charAt(0))//a

二、charCodeAt()
指定された位置にある文字のユニックコードを返します。

var str="abc"
console.log(str.charCodeAt(1))//98

三、concat（）
文字列を接続します。

var a = "abc"; 
var b = "def"; 
var c = a.concat(b);
console.log(c);//abcdef

四、indexOf()
文字列を検索します。indexOf()メソッドは、大文字と小文字に敏感です。

var str="Hello world!"
console.log(str.indexOf("Hello"))//0
console.log(str.indexOf("World"))//-1
console.log(str.indexOf("world"))///6

五、match（）
match()メソッドは、指定された値を文字列内で検索したり、1つ以上の正規表現のマッチングを見つけることができます。この方法はindexOf（）とlastIndexOf（）と似ていますが、文字列の位置ではなく指定された値を返します。

var str="1 abc 2 def 3"
console.log(str.match(/\d+/g))//123

六、replace（）
replace()メソッドは、文字列の中で他の文字を一部の文字で置き換えたり、正規表現と一致するサブストリングを置き換えるために使用されます。

var str="abc Def!"
console.log(str.replace(/abc/, "CBA"))//CBA Def!

七、search（）
search()メソッドは、文字列で指定されたサブ文字列を検索したり、正規表現と一致するサブ文字列を検索します。大文字と小文字を無視した検索を実行するには、マークiを追加してください。マッチするサブストリングが見つからない場合は、-1を返します。

var str="abc DEF!"
console.log(str.search(/DEF/))//4

八、slice（）
文字列の断片を抽出し、抽出された部分を新しい文字列に返します。
stingObject.slice（start，end）；
start :抽出するセッションの開始値を下に表示します。負の数であれば、このパラメータは文字列の末尾から計算される位置を規定しています。つまり、-1は文字列の最後の文字を指し、-2は下から2番目の文字を指し、これを類推します。
end：抽出するセグメントの末尾の下付き。このパラメータが指定されていない場合、抽出するサブストリングは、startから元の文字列の最後までの文字列を含みます。このパラメータが負の場合、文字列の末尾から計算される位置を規定します。

var str="abc def ghk"
console.log(str.slice(6))//f ghk

九、スプリット（）
文字列を文字列配列に分割します。

var str="abc def ghi jkl" 
console.log(str.split(" "))//["abc", "def", "ghi", "jkl"]
console.log(str.split("") )//["a", "b", "c", " ", "d", "e", "f", " ", "g", "h", "i", " ", "j", "k", "l"]
console.log(str.split(" ",3))//["abc", "def", "ghi"]

十、toLocaree LowerCase（）
文字列を小文字に変換します。

var str="ABC def!"
console.log(str.toLocaleLowerCase())//abc def!

十一、toLocaleUpperCase（）
文字列を大文字に変換します。

var str="ABC def!"
console.log(str.toLocaleUpperCase())//ABC DEF!

十二、タワーケーブル（）
文字列を小文字に変換します。

var str="ABC def!"
console.log(str.toLowerCase())//abc def!

十三、トUpperCase（）
文字列を大文字に変換します。

var str="ABC def!"
console.log(str.toUpperCase())//ABC DEF!

十四、substr（）
開始インデックス番号から文字列の指定数の文字を抽出します。
stingObject.substr。
start：必要です。抽出するサブストリングの開始値を下に表示します。数値が必要です。負の数であれば、このパラメータ宣言は文字列の末尾から計算される位置です。つまり、-1は文字列の最後の文字を指し、-2は後ろから2番目の文字を指し、これを類推します。
length:オプションです。サブストリングの文字数。数値が必要です。このパラメータを省略すると、stingObjectの開始位置から最後の文字列に戻ります。

var str="abc def"
console.log(str.substr(2))//c def
console.log(str.substr(2,4))// c de 

十五、substring（）
文字列の中の2つの指定された索引番号の間の文字を抽出します。
stingObject.substring。
start：必要です。負でない整数は、抽出するサブストリングの最初の文字がストリングObjectの位置を規定しています。
stop:オプションです。負ではない整数は、抽出するサブストリングの最後の文字より1つ多い。このパラメータを省略すると、返したサブストリングは文字列の最後まで続きます。

var str="abc def"
console.log(str.substring(2))//c def
console.log(str.substring(2,4))// c 

同じ点：パラメータを書くだけなら、両方の役割は同じです。すべては現在の下付き文字列から文字列の最後の文字列までを切り取ります。
substr(startIndex)
substring(startIndex)

var str = '123456789';
console.log(str.substr(2)); // "3456789"
console.log(str.substring(2)) ;// "3456789"

異なる点：2番目のパラメータ
substr（startIndex，lenth）：2番目のパラメータは文字列の長さを切り取ります。
substring（startIndex，endIndex）：2番目のパラメータは文字列の最終的な下付き文字列を切り取ることです。

console.log("123456789".substr(2,5)); // "34567"
console.log("123456789".substring(2,5)) ;// "345"

ES 6新規操作文字列の方法
一、codePointAt()

let s = ' a';
s.codePointAt(0) // 134071
s.codePointAt(1) // 57271
s.codePointAt(2) // 97

codePointAtメソッドのパラメータは、文字列内の位置（0から開始）です。上のコードの中で、JavaScriptは「?a」を3つの文字として扱い、codePointAt方法は最初の文字で「?」を正しく認識して、その10進数符号点134071（すなわち16進数の20 BB 7）を返します。2番目の文字（すなわち「?」の後の2バイト）と3番目の文字「a」では、codePointAtメソッドの結果は、charCodeAtメソッドと同じである。
二、Stering.from CodePoint()
ES 5は、String.from CharCode方法を提供し、コードポイントから対応文字を返すが、この方法では32ビットのUTF-16文字を識別できない。
String.from CharCode(0 x 20 BB 7)
//「ஷ」
上のコードでは、String.from CharCodeは0 xFFFF以上のコードポイントを識別できないため、0 x 20 BB 7にオーバーフローが発生し、最上位2が破棄されました。最後にコードポイントU+0 BB 7に対応する文字ではなく、コードポイントU+20 BB 7に対応する文字を返します。
ES 6は、String.from CodePoint方法を提供し、0 xFFFF以上の文字を識別でき、String.from CharCode方法の不足を補う。役割は、ちょうどcodePointAt法と反対です。

String.fromCodePoint(0x20BB7)
// " "
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true

三、文字列のエルゴーバーインターフェースfor of

for (let codePoint of 'abc') {
 console.log(codePoint)
}
// "a"
// "b"
// "c"

文字列を巡回する以外に、この巡回器の最大の利点は0 xFFFFより大きい符号点を識別できることであり、従来のforサイクルはこのような符号点を識別できない。
四、at（）
atメソッドは、Unicode番号が0 xFFFFより大きい文字を識別し、正しい文字を返します。

‘abc'.at(0)//"a"
' '.at(0)//" "

五、normalize()
多くのヨーロッパ語にはアクセント記号とアクセント記号があります。それらを表現するために、ユニックodeは2つの方法を提供します。一つは、アクセント付き記号を直接提供する文字です。Ǒ（u 01 D 1)もう一つは、合成記号（cobining character）、すなわち元の文字とアクセント記号の合成を提供し、2つの文字はO（u 004 F）とˇ（u 030 C合成Ǒ（u 004 Fu030 C）
この2つの表現方法は視覚と意味の両方において等価であるが、JavaScriptは識別できない。

'\u01D1'==='\u004F\u030C' //false 
'\u01D1'.length // 1
'\u004F\u030C'.length // 2

上のコードは、JavaScriptが合成文字を2つの文字と見なし、2つの表現方法が等しくないことを示しています。
ES 6は文字列の例のnormalize（）方法を提供し、文字の異なる表現方法を同じ形式に統一することをユニック正規化と呼ぶ。

'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true 

六、includes()、starts With()、ends With()
従来、JavaScriptはindexOf方法だけであり、他の文字列に文字列が含まれているかどうかを判定するために使用されてもよい。ES 6はまた3つの新しい方法を提供します。 

**includes()**：     ，            。
**startsWith()**：     ，                 。
**endsWith()**：     ，                 。
let s = 'Hello world!'; 
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

これらの3つの方法はいずれも第2のパラメータをサポートし、検索を開始する位置を表しています。

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

上のコードは、第二のパラメータnを使用すると、endsWithの挙動が他の2つの方法と異なることを示しています。前のn文字に対して、他の2つの方法はn番目の位置から文字列が終わるまでです。
七、repeat()
repeatメソッドは新しい文字列を返し、元の文字列をn回繰り返すことを表します。

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

パラメータが小数なら、整数になります。
'na'.repeat(2.9)// "nana"
repeatのパラメータが負かInfinityなら、エラーが発生します。

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

八、padStart（）、padEnd（）
ES 2017は文字列補完長機能を導入しています。指定された長さの文字列が足りない場合、頭または尾に補完されます。padStart（）は頭の補完に使い、最後の補完に使います。

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

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

上のコードの中で、padStartとpadEndは全部で二つのパラメータを受け入れます。最初のパラメータは文字列の最小長さを指定します。二つ目のパラメータは補完する文字列です。
元の文字列の長さが指定された最小の長さ以上の場合、元の文字列を返します。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

補完する文字列と元の文字列の両方の長さと指定された最小長さを超えると、桁数を超えた補完文字列がカットされます。

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

2番目のパラメータを省略すると、デフォルトではスペースで長さを補完します。

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

padStartの一般的な用途は、数値を補完するための指定桁数です。下のコードは10ビットの数値文字列を生成します。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

もう一つの用途は、文字列の書式を提示することです。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

九、match All()
match All法は、現在の文字列での正規表現のすべてのマッチを返します。
十文字列テンプレート
テンプレート文字列(template string)は拡張版の文字列で、逆引用符(`)で表示されます。これは普通の文字列として使用できます。また、複数行の文字列を定義したり、文字列に変数を埋め込んだりできます。文字列テンプレートは、作業に多く使われます。

//      
`In JavaScript '
' is a line-feed.`

//      
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

//         
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上のコードのテンプレート文字列は、すべて逆引用符で表します。テンプレートの文字列に逆引用符が必要な場合は、前の部分を逆傾斜棒で変換します。
let greeting= `\`Yo\`World！`;
テンプレート文字列が複数行の文字列を表す場合、すべてのスペースとインデントは出力に保存されます。 

$('#list').html(`
<ul>
 <li>first</li>
 <li>second</li>
</ul>
`);

上のコードは、すべてのテンプレート文字列のスペースと改行が保持されています。たとえば、「ul」タブの前に改行があります。この改行を望まないなら、trimメソッドで消してもいいです。

$('#list').html(`
<ul>
 <li>first</li>
 <li>second</li>
</ul>
`.trim());

テンプレート文字列に変数を埋め込むには、変数名を${}に書く必要があります。

function authorize(user, action) {
 if (!user.hasPrivilege(action)) {
 throw new Error(
  //      
  // 'User '
  // + user.name
  // + ' is not authorized to do '
  // + action
  // + '.'
  `User ${user.name} is not authorized to do ${action}.`);
 }
}

大かっこの中には、任意のJavaScript表式を入れて演算したり、オブジェクトの属性を参照したりできます。

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"

テンプレート文字列の中で関数を呼び出すこともできます。

function fn() {
 return "Hello World";
} 
`foo ${fn()} bar`
// foo Hello World bar

大かっこの値が文字列でない場合は、一般的な規則に従って文字列に変換します。例えば、大括弧の中では対象となり、対象のStringメソッドをデフォルトで呼び出す。
テンプレート文字列の変数が宣言されていない場合、エラーが発生します。

//   place    
let msg = `Hello, ${place}`;
//   

テンプレート文字列の大括弧の内部はJavaScriptコードを実行するため、大括弧の中に文字列があるとそのまま出力されます。

`Hello ${'World'}`
// "Hello World"

テンプレート文字列はさらにネストされます。

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

PS:文中ES 6の内容は主に阮一峰の『ES 6標準入門』から来ています。