[js]文字列操作、配列操作

# 🟦[js]文字列操作、配列操作

≪いろいろ≫ 見つける系、etc…、2次元配列を1次元配列、配列かどうか判定、etc…
≪エンコード/デコード≫ URL形式、Unicode形式、base64形式
≪文字列切り出し≫ substr、substring、charAt、indexOf、search、mutch
≪配列操作≫ slice(n1,n2), splice(n1,n2,n3...), toString,  split, join, pop

なんだかんだしょっちゅう見返してる...
詳しい解説とか説明とかないです、見返し用なので(自分が)見たらわかる程度の説明文...
なのである程度jsが分かってる人向けかも...

## ※前書き
・jsのコードを、色付きとか変数を図形類(例:○や△や□など)でメモることが多く、それが自分にとって一番わかりやすいので、個人的メモをQiitaに移行する意味合いが大きいこの記事ではmarkdown記法の｢コード｣をコード部分で使ってないことが多いです。
・これは、初めの頃、一言一句(大文字と小文字さえ)違ったらいけないカ所と、(引数,変数など)自分で命名できるヶ所の違いが、例文や構文として出てる記述方法だとよく分からなかったからです。<font color=darkgray>よく分からないというのは具体的には、単に斜体、引数(の長ったらしい説明文)、barとかfooとか(自分にとって全く)馴染みのない単語が変数例として当然のように出てくること、などです...</font>


※色付き：
　変数とか引数を色分け≒個人的にこっちの方が一目瞭然(視認性)
　｢好き勝手付けていいヶ所｣の意味もある
※変数が○△□類：
　｢好き勝手付けていいヶ所｣
　あとbarとかfooとかよく出るけど『何なん？それ…』と常々思ってるから
　　　<font color=darkgray>↑※慣例みたいだが由来を知らないという意味で</font>


## ≪いろいろ≫
<font color=#B22222>__＊見つける系__</font>
<font color=darkgray>indexOf()、findIndex()、find()</font>

__・indexOf()__
<font color=#22825D>文字列</font>や<font color=#0071B0>配列</font>から<font color=#6846A5>指定文字列</font>がどの<font color=#E86B79>位置</font>か取得. <font color=#eb6101>最初の分だけ.</font> 
一致する指定文字が見つからなかい場合は -1 
<font color=#22825D>〇〇</font>.indexOf('<font color=#6846A5>指定文字列</font>') <font color=darkgray>//結果は数値</font>

__・findIndex()__
<font color=#0071B0>配列</font>から<font color=#6846A5>指定文字列</font>を条件を表す関数として指定してどの<font color=#E86B79>位置</font>かindex番号を取得. 
<font color=#22825D>〇〇</font>.findIndex(v => v==='<font color=#6846A5>指定文字列</font>') <font color=darkgray>//結果は数値=配列〇〇のindex番号 </font>
※つまりアロー関数みたいになる

__・find()__
<font color=#0071B0>配列</font>から<font color=#6846A5>指定文字列</font>の要素そのものを探して取得.
<font color=#22825D>〇〇</font>.find()
~~<font color=darkgray> →指定文字を含む要素の場合は？=調べきれてない=
 〇〇.find(〇〇.indexOf('指定文字列')) // ?指定文字を含む要素の場合? </font>~~


　
<font color=#B22222>__＊含む含まない(マッチするかどうか,あるかないか)__</font>
<font color=darkgray>includes, indexOf、test、match、search、exec、filter</font>
- - - «ミニまとめ» - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
　__includes__ → 含む含まない ≒ あるかないか ...をtrue/falseで返す
　　　　　　　第二引数で検索開始位置の指定も可能
　__indexOf__ →  引数として渡された文字列 ...を検索し (正規表現は使えない)
　	　　　　├見つかったらその位置
　	　　　　└見つからなかったら-1

　__test__ → 　単に 含む含まない ≒ 単にあるかないか ...をtrue/falseで返す
　__match__ → <font color=#22825D>対象文字列</font>as<font color=hotpink>正規表現</font> ...を<font color=#0071B0>配列</font>で返す
　__search__ → 引数として渡された<font color=#22825D>対象文字列</font>as<font color=hotpink>正規表現</font> ...を検索し
　	　　　　├見つかったらその位置
　	　　　　└見つからなかったら-1

　__exec__　→　<font color=#22825D>対象文字列</font>as<font color=hotpink>正規表現</font>...を検索し結果は配列かnull
　	　　　　├見つかったら、マッチした部分の文字列を取得as<font color=#0071B0>配列</font>要素の0番目
　	　　　　└見つからなかった場合は null 

　__filter__　→ 　 配列から特定の値だけを『フィルタリング』して取り出す

　<font color=darkgray>__replace__　→ <font color=darkseagreen>対象文字列</font>as正規表現 ...を任意の文字列に置き換える
　　　　　└→ <font color=darkseagreen>単なる文字列</font> ...を任意の文字列に置き換える</font>

<font color=darkgray>※ replaceはこの記事には出てないが関連するので</font>
- - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - //ミニまとめ - - - -

　
__・includes__
__・str.includes(<font color=#22825D>〇〇</font>)__ <font color=darkgray>...みたいな感じで使う. 変数strの位置</font>
<font color=#22825D>文字列</font>から<font color=#6846A5>指定文字列</font>含む含まない判定. 結果はtrueかfalse.
'<font color=#22825D>abc</font>'.includes('<font color=#6846A5>b</font>') <font color=darkgray>// true (含む)</font>
'<font color=#22825D>abc</font>'.includes('<font color=#6846A5>B</font>') <font color=darkgray>// false (含まない)</font>
※第二引数で検索開始位置の指定も可能
'<font color=#22825D>abc</font>'.includes('<font color=#6846A5>a</font>', 1) <font color=darkgray>// false (含まない)

__・indexOf__
__・str.indexOf(<font color=#22825D>〇〇</font>)__ <font color=darkgray>...みたいな感じで使う. 変数strの位置</font>
**本来は<font color=#22825D>文字列</font>の出現位置**を出すメソッド. (正規表現は使えない) 
一致する文字列が見つからなかった場合に -1 が出るので含む含まないの判定も可能.
'<font color=#22825D>abc</font>'.indexOf('<font color=#6846A5>a</font>') <font color=darkgray>// 0 (含む)</font>
'<font color=#22825D>abc</font>'.indexOf('<font color=#6846A5>b</font>') <font color=darkgray>// 1 (含む)</font>
'<font color=#22825D>abc</font>'.indexOf('<font color=#6846A5>c</font>') <font color=darkgray>// 2 (含む)</font>
'<font color=#22825D>abc</font>'.indexOf('<font color=#6846A5>B</font>') <font color=darkgray>// -1 (見つからない=含まない)</font>

__・test__
__・<font color=#22825D>/〇〇/</font>.test(str)__ <font color=darkgray>...みたいな感じで使う. 変数strの位置</font>
**正規表現**使用. <font color=#B22222>単にマッチするかどうかならmatch(後述)より高速動作.</font> 結果はtrueかfalse.
<font color=#22825D>(正規表現による)文字列〇〇</font>の出現位置はわからない→出現位置を調べるならmatchかsearch

__・match__
__・str.match<font color=#22825D>/〇〇/</font>__ <font color=darkgray>...みたいな感じで使う. 変数strの位置</font>
matchの戻り値≒結果は<font color=#0071B0>配列</font>

__・search__
__・str.search<font color=#22825D>/〇〇/</font>__ <font color=darkgray>...みたいな感じで使う. 変数strの位置</font>
match,replaceの仲間で**正規表現**をマッチさせるメソッド
indexOfの正規表現版のようなもの(**本来は文字列の出現位置**を出すもの)

__・exec__
__・<font color=#22825D>/〇〇/</font>exec(str)__ <font color=darkgray>...みたいな感じで使う. 変数strの位置</font>
execの戻り値≒結果は、あれば<font color=#0071B0>配列</font>、なければnull
配列要素0番目・・・マッチした部分の文字列そのものを取得、
配列要素1番目・・・文字列の出現位置
<font color=darkgray>※正規表現パターンにキャプチャグループを含めることも可能
=キャプチャグループ 詳細略=</font>

<font color=darkgray>= match, search, exec共通：なかった場合のnull =
配列(の0番目や2番目の要素)を取得しようとするとエラーになるので、実際の運用ではnullかどうかの条件分岐か例外処理など書く必要ありかもね</font>

```js:testとmatchとsearchとexecの例
//●｢CJK統合漢字｣というのを正規表現であるかないか調べる、という例

const str='strという文字列の変数があるとする';

/*  ちなみに"出現位置"とかいうのの数え方は0始まりなのでこう
 0 1 2 3  4 5  6  7  8  9  10 11 12  13 14 15 16 17
　　s t r と い う  文 字 列  の  変 数 が   あ る  と  す る
*/

//----------- test (あるかないかだけ)------------
//例❶：単にあるかないかをconsole.logで出す
console.log(/[\u3400-\u9FFF]/.test(str)); //true (≒ある)

//例❷：ある場合console.logで任意のメッセージを出す(という例)
if(/[\u3400-\u9FFF]/.test(str)){
 console.log('CJK統合漢字が変数strの中にある');
}

//例❸：含まれない場合の挙動(数字があるかないか)
console.log(/0-9/.test(str)); //false

//----------- match (戻り値≒結果が配列)------------
//例❶：オプションなし
console.log( str.match(/[\u3400-\u9FFF]/) );  //結果は下記配列
//["文", index: 6, input: "strという文字列の変数があるとする", groups: undefined]

//例❷：全文検索のgオプション付き
console.log( str.match(/[\u3400-\u9FFF]/g) ); //結果は下記配列
//["文", "字", "列", "変", "数"] ※これらが｢CJK統合漢字｣というわけだ

//例❸：含まれない場合の挙動(数字があるかないか)
console.log( str.match(/0-9/) ); //null

//----------- search (戻り値≒結果が出現位置)------------
//例❶：オプションなし
console.log( str.search(/[\u3400-\u9FFF]/) ); //6
//結果は(最初のCJK統合漢字)出現位置の「6」、「文字列」の「文」の位置

//例❷：全文検索のgオプション付き(g意味なーし)
console.log( str.search(/[\u3400-\u9FFF]/g) ); //6
//結果は(最初のCJK統合漢字)出現位置の「6」、「文字列」の「文」の位置

//例❸：含まれない場合の挙動(数字があるかないか)
console.log( str.search(/0-9/) ); //-1

//----------- exec (戻り値≒結果が配列)------------
//例❶：オプションなし
console.log( /[\u3400-\u9FFF]/.exec(str) ); //結果は下記配列
//["文", index: 6, input: "strという文字列の変数があるとする", groups: undefined]

//例❷：全文検索のgオプション付き(g意味なーし)
console.log( /[\u3400-\u9FFF]/g.exec(str) ); //結果は下記配列
//["文", index: 6, input: "strという文字列の変数があるとする", groups: undefined]

//例❸：含まれない場合の挙動(数字があるかないか)
console.log( /0-9/.exec(str) ); //null
```

__・filter__
<font color=#0071B0>配列</font>から特定の値だけを『フィルタリング』して取り出す.
var <font color=#0071B0>data</font> =[5,6,7,8]; <font color=darkgray>//という数字の配列</font>
var <font color=#6846A>result</font>=<font color=#0071B0>data</font> .filter(v => {<font color=hotpink>return</font> v <= <font color=#6846A5>6</font>;});  <font color=darkgray>// 6以下の数字(6含む)</font>
console.log(<font color=#6846A5>result</font>); <font color=darkgray>// [5,6]</font>

　　
<font color=#B22222>__＊重複を取り除いた配列を得る__</font>
　　<font color=darkgray>const <font color=#0071B0>○○</font> = [1, 2, 4, 2, 3 , 3, 2, 4, 5, 7, 5, 6, 1, 2];  //重複あり配列</font>

__例1) filterとindexOf__
※この方法は元の<font color=#0071B0>配列○○</font>を加工し重複のない配列<font color=#0071B0>○△</font>とする
<font color=#0071B0>○△</font>.filter( (<font color=#6846A5>val</font>, <font color=#6846A5>idx</font> ) => <font color=#0071B0>○○</font>.indexOf(<font color=#6846A5>val</font>) === <font color=#6846A5>idx</font> );

__例2) filterとindexOf__
※この方法は元の<font color=#0071B0>配列○○</font>から新たに重複のない配列<font color=#0071B0>△△</font>を作る
const <font color=#0071B0>△△</font>=<font color=#0071B0>○○</font>.filter( (<font color=#6846A5>val</font>, <font color=#6846A5>idx</font>, <font color=#6846A5>arr</font>) => <font color=#6846A5>arr</font>.indexOf(<font color=#6846A5>val</font>) === <font color=#6846A5>idx</font>);

__例3) Set とArray.from__
※この方法は元の<font color=#0071B0>配列○○</font>から新たに重複のない配列<font color=#0071B0>△△</font>を作る
const <font color=#0071B0>△△</font> = Array.from(<font color=#E86B79>new Set(<font color=#0071B0>○○</font>)</font>); <font color=darkgray>//Setを生成し配列にする</font>

__例4) Setとスプレッド演算子__
※この方法は元の<font color=#0071B0>配列○○</font>から新たに重複のない配列<font color=#0071B0>△△</font>を作る
const <font color=#0071B0>△△</font> = […<font color=#E86B79>new Set(<font color=#0071B0>○○</font>)</font>];  <font color=darkgray>//Setを生成し配列にする</font>

　　
<font color=#B22222>__＊指定範囲の整数が要素の配列を作る__</font>
__・[…Array(n).keys()]__
スプレッドなんちゃらで作る. 0からn-1まで
<font color=darkgray>▼例1) 1始まり60の長さ(要素数)の配列
const ○○ = [...Array(60).keys()].map(i => ++i) ];
//  [1, 2, 3, 4,....,60]</font>

<font color=darkgray>▼例２) 20始まり60の長さ(要素数)の配列              ↓20始
const ○○ = [...Array(60).keys()].map(i => ++i+19) ;
//  [20, 2, 3, 4,….,80]</font>

__・forで作る. forの方が早いんだって__
▼例1) 0始まり60の長さ(要素数)の配列
const ◯ = new Array(60);
for (let i = 0; i < n; i++) {◯[i] = i; }
	// i=0のヶ所を i=5とかしにしたら5始まり
▼例２) 20始まり60の長さ(要素数)の配列 
const ◯ = new Array(60);
for (let i = 20; i < n; i++) {◯[i] = i; }</font>

　　
<font color=#B22222>__＊２次元配列を1次元配列にする__</font>
　　<font color=darkgray>var <font color=#5BAD92>ary</font> = [[1,2,3,4,5,6,7],[8,9,10],[11,12]];  //←共通：元の2次元配列</font>

__・… (←コレ。てんてんてん、スプレッド演算子で展開)__
const 〇〇=[…<font color=#5BAD92>ary</font>];

__・Array.prototype.concat.apply__
<font color=#2E64FE>⚠︎上記 …(スプレッド演算子)で展開か下記flat使った方がラク</font>
　　<font color=darkgray>var <font color=#5BAD92>ary2</font> = Array.prototype.concat.apply([],<font color=#5BAD92>ary</font>);
　　// [1,2,3,4,5,6,7,8,9,10,11,12];;</font>

__・□.flat(n)__
nは何次元までの<font color=#0071B0>配列</font>をフラット化するかを指定する数字. ES2019(ES10)で追加
　　<font color=darkgray>const <font color=#5BAD92>〇〇</font>=<font color=#5BAD92>ary</font>.flat(2)  // [1,2,3,4,5,6,7,8,9,10,11,12];;</font>

__・□.flatMap()__
<font color=#0071B0>配列</font>に対して map() を行い、結果として得られた多次元配列を flat() でフラット化
　　<font color=darkgray>この例では半角スペースで区切ってる
　　var arr = ["Blue Green", "Red Yellow"];
　　const <font color=#5BAD92>〇〇</font>=arr.flatMap(x => x.split(" "))  // => ["Blue", "Green", "Red", "Yellow"];</font>

　　
<font color=#B22222>__＊配列かどうか判定__</font>
__・〇〇 instanceof Array__
対象〇〇が<font color=#0071B0>配列</font>かどうかtrue/falseで判定.  連想配列は配列と判定されない.
　　<font color=darkgray>例
　　console.log( 〇〇 instanceof Array );</font>

__・Array.isArray(〇〇)__
対象〇〇が<font color=#0071B0>配列</font>かどうかtrue/falseで判定. 連想配列は配列と判定されない.
　　<font color=darkgray>例
　　console.log( Array.isArray(〇〇) );</font>

　　
<font color=#B22222>__＊配列のようなオブジェクトから配列を作る__</font>
__・Array.of(〇〇,△△,□□)__
<font color=#E86B79>引数に与えられた値(〇〇とか△△とか□□とか)</font>を持った<font color=#0071B0>配列</font>を作成.
(newなんちゃらで配列を作成するときとほぼ同じ)

__・Array.from(□)__
<font color=#E86B79>配列のようなオブジェクト□や反復可能オブジェクト□</font>から新たに配列を作成.
<font color=darkgray>例 ↓文字列も配列として出力する
　　console.log(Array.from("mojiretsu")); //配列として出力
　　//["m", "o", "j", "i", "r", "e","t","s","u"]</font>
<font color=#965042>⚠︎querySelectorAll()  の戻り値は Nodelist なので、forEach() が使える</font>
<font color=#965042>⚠︎getElementsByClassName()  の戻り値は HTMLCollection  で forEach() 使えない</font>

```js:js
//例 ↓querySelectorAll() で取得したやつを<font color=#0071B0>配列</font>に変換してforEachで処理
//※あくまでコード例
//※id名には「#」、class名には「.」が必要=cssの仕様と同じ
const eles=document.querySelectorAll(‘.hidden’);
Array.from(eles).forEach( val => {
    //処理例：class名 hiddenがあるタグは非表示
    val.style.display='none';
});

//例 ↓getElementsByTagName() を使って取得したやつ(配列っぽいナニか)から<font color=#0071B0>配列</font>を生成
const anchors_array = Array.from(document.getElementsByTagName('a')); 

//例 ↓getElementsByClassName() を使って取得したやつ(以下同文)
const arr_hidden = Array.from(document.getElementsByClassName('hidden')); 
```
　
__・call() と slice() を使う__ <font color=#2E64FE>【⚠️】上記のArray.fromを使った方が簡潔</font>
<font color=darkgray>//❶配列のようなオブジェクトを取得</font>
```const anchors = document.getElementsByTagName('a');```

<font color=darkgray>//❷配列のようなオブジェクトを配列に変換

```const anchors_array = Array.prototype.slice.call(anchors);```
<font color=darkgray></font>

```js:js
//↑上記は以下のように ↓まとめて記述可
const anchors_array = Array.prototype.slice.call( 
  document.getElementsByTagName('a')
); 
```

　　
<font color=#B22222>__＊Number関連__</font>
__・toExponential()__
指数形式に変換. 〜よくわからん詳細略〜

__・toFixed(n)__
数値を指定小数点桁数で文字列に変換. 値は四捨五入される
　　<font color=darkgray>console.log(Math.PI);  //Math.PI は円周率
　　//3.141592653589793（数値）
　　console.log(Math.PI.toFixed());  //3 (文字列)
　　console.log(Math.PI.toFixed(2)); //3.14(文字列)</font>

__・toPrecision(n)__
指定桁数に変換
　　<font color=darkgray>console.log(Math.PI);  //Math.PI は円周率
　　//3.141592653589793（数値）
　　console.log(Math.PI.toPrecision());  //3.141592653589793（文字列）
　　console.log(Math.PI.toPrecision(2)); //3.1（2桁）</font>

__・toString(n)__
数値から文字列（n 進数の値）への変換. nを指定しないと10進数
整数を変換する際に使われるのが一般的


　　
<font color=#B22222>__＊数値の正数、ゼロ、負数を判定__</font>
__・Math.sign(○)__
<font color=darkgray>※○が正数(ex. 1,2,3,40, …)かゼロ(ex. 0)か負数(-2, -3,-40 …)を判定</font>
※正数の場合は1、負数の場合は-1、ゼロの場合は0

　　
<font color=#B22222>__＊数値にする(整数にする)__</font>
__・parseInt(○○,<font color=#E86B79>10</font>)__
第一引数：数値にしたいやつ ※〇〇部分は計算式でも可
第二引数：<font color=#E86B79>10</font>で10進数 <font color=darkgray>※10進数以外もあるがここでは略</font>
文字列の数字を数値にしたいときとか、明示的に数値であるとしたいとき *今後の推奨 ES2015以降
→Numberの静的メソッドになった
→Number.parseInt(○○,10) のように使う 

　　
<font color=#B22222>__＊<font color=#22825D>数字as文字列</font>の桁数が足りない時に先頭に0をつける__</font>
__・padStart__
__・<font color=#22825D>〇〇</font>.padStart(4,'0');__ <font color=darkgray>//例) 4桁数字as<font color=#22825D>文字列</font>,足りない場合先頭に0を足す</font>
* <font color=#22825D>文字列</font>の長さが足りないときに指定した文字で埋めるメソッド
※第2引数を省略すると" "（半角スペース）で補われる
 **padStart** は文字列の先頭に、**padEnd** は<font color=#22825D>文字列</font>の最後に文字列を付け足す
<font color=darkgray>例) ↓数値の桁数が足りない時に先頭に0を付け足したい場合
	console.log('<font color=#22825D>6</font>'.padStart(<font color=#E86B79>2</font>, '0')); //06</font>
<font color=#22825D>文字列</font>(≒この場合<font color=#22825D>6</font>)の長さが<font color=#E86B79>指定された数値</font>(≒この場合<font color=#E86B79>2</font>桁)より短い場合
足りない分だけ第2引数に指定された文字を付け足す
<font color=#2E64FE>**数値を扱うわけじゃないので
対象が数値の場合、一旦文字列としての数字にするためtoStringでもかませ**</font>
<font color=darkgray>例) ↓<font color=#2E64FE>数値</font>なので効かない
	console.log(<font color=#2E64FE>6</font>.padStart(2, '0')); // これは数値なので効かない
例) ↓数字部分が数値なので一旦toStringで<font color=#22825D>文字列</font>化
	console.log( <font color=#22825D>(</font><font color=#2E64FE>6</font><font color=#22825D>).toString()</font>.padStart(2, '0') ); // </font>

\- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - -
<font color=#2E64FE>**↑⚠︎コッチは対象は数値のまま使える、が、結果は文字列↓　**</font>
<font color=#B22222>__＊桁数が足りない時に先頭に0をつける 〜0とsliceを使う〜__</font>
__・('0000'+<font color=#2E64FE>○○</font>).slice(-4);__ <font color=darkgray>//例) 4桁数字as<font color=#2E64FE>数値</font>,足りない場合先頭に0を足す</font>
<font color=darkgray>例) ↓数字部分(≒この場合<font color=#E86B79>2</font>桁)
	console.log( ('<font color=#E86B79>00</font>'+<font color=#22825D>6</font>).slice(<font color=#E86B79>-2</font>)); // "06”
例) ↓数字部分(≒この場合<font color=#E86B79>4</font>桁)
	console.log( ('<font color=#E86B79>0000</font>'+<font color=#22825D>6</font>).slice(<font color=#E86B79>-4</font>)); // "0006”
注意) ↓結果は文字列 (**typeof**で調べることができる =詳細略=)
	console.log( typeof ('<font color=#E86B79>0000</font>'+<font color=#22825D>6</font>).slice(<font color=#E86B79>-4</font>) ); //string 　※｢string｣は文字列ってこと</font>
\- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - - - -

　　
<font color=#B22222>__＊数値が整数かどうか判定__</font>
__・Number.isInteger__
Integerというのは整数
<font color=darkgray>console.log(Number.isInteger(3)); /// true</font>
<font color=darkgray>console.log(Number.isInteger(2.5)); /// false</font>
<font color=darkgray>console.log(Number.isInteger(2 ** 128)); /// true</font>

　　
<font color=#B22222>__＊大文字 or 小文字にする__</font>
__・<font color=#22825D>〇〇</font>.toLowerCase()__ <font color=darkgray>//例) A→a</font>
__・<font color=#22825D>〇〇</font>.toUpperCase()__ <font color=darkgray>//例) a→A</font>

　　
<font color=#B22222>__＊文字列の前後にある空白や改行を消す__</font>
・trim()
<font color=darkgray>"<font color=silver>______</font>aaa bbb ccc<font color=silver>_________</font>".trim()	 // "aaa bbb ccc"
※上記例は空白部分をわかりやすく「<font color=silver>______</font> 」で表してるだけ</font>



## ≪エンコード/デコード≫
<font color=#B22222>__＊urlエンコード/デコード__</font>
__・encodeURIComponent(<font color=#6846A5>〇〇</font>)__
<font color=#22825D>文字列</font> → url形式(にエンコード). 引数<font color=#6846A5>〇〇</font>は普通の文字列.
<font color=darkgray>const <font color=#5BAD92>str</font> = encodeURIComponent('エン');
console.log<font color=#5BAD92>str</font>); // %E3%82%A8%E3%83%B3</font>

__・decodeURIcomponent(<font color=#6846A5>△△</font>)__
url形式 → <font color=#22825D>文字列</font>(にデコード). 引数<font color=#6846A5>△△</font>)はurlエンコードされた文字列(下記みたいなの).
<font color=darkgray>const <font color=#5BAD92>uristr</font> = encodeURIComponent('%E3%83%87%E3%82%B3');
console.log(<font color=#5BAD92>uristr</font>); //デコ</font>

　　
<font color=#B22222>__＊Unicodeエンコード/デコード__</font>
__・escape(<font color=#6846A5>〇〇</font>)__
<font color=#22825D>文字列</font> → Unicode形式(にエンコード). 引数<font color=#6846A5>〇〇</font>は普通の文字列.
<font color=darkgray>const <font color=#5BAD92>str</font> = escape('ユニ');
console.log(<font color=#5BAD92>str</font>);  //%u30E6%u30CB</font>

__・unescape(<font color=#6846A5>△△</font>)__
Unicode形式 → <font color=#22825D>文字列</font>(にデコード). 引数<font color=#6846A5>△△</font>はUnicode形式文字列(下記みたいなの).
<font color=darkgray>const <font color=#5BAD92>unistr</font> = unescape( ‘%u30E6%u30CB’ );
console.log(<font color=#5BAD92>unistr</font>);  //ユニ</font>

　　
<font color=#B22222>__＊base64エンコード/デコード__</font>
*64進数化. すべてのデータをアルファベット(a~z, A~z)と数字(0~9)、一部の記号(+,/)の64文字で表す
__・btoa(<font color=#6846A5>〇〇</font>)__
<font color=#22825D>文字列</font> -> base64(にエンコード)
<font color=darkgray>const <font color=#5BAD92>str</font> = btoa(ベース);
console.log(<font color=#5BAD92>str</font>); //44G544O844K5</font>

__・atob(<font color=#6846A5>〇△</font>)__
base64 → <font color=#22825D>文字列</font>(にデコード)
<font color=darkgray>const <font color=#5BAD92>base64str</font> = btoa(44G544O844K5);
console.log(<font color=#5BAD92>base64str</font>); //ベース</font>



## ≪文字列切り出し≫
__・substr(n1,n2)__
<font color=#22825D>文字列</font>から位置指定＆文字数指定で切り出す. 
引数の数字は2コ n1=切り出し位置、n2=切り出す文字数
*n1= -1 にすると末尾からの位置
*substrの切り出し位置にindexOfで出した値を使ったり

__・charAt(n)__
<font color=#22825D>文字列</font>から1文字だけ切り出す. 引数は切り出す位置. 

・substring(n1,n2)
<font color=#22825D>文字列</font>の指定範囲の文字を切り出す. n1=開始位置、n2=終了位置

__・indexOf__
<font color=#22825D>文字列</font>から指定文字がどの<font color=#E86B79>位置</font>か取得. <font color=#eb6101>最初の分だけ. </font>
一致する指定文字が見つからなかい場合は -1 
> 複雑なhtmlタグを用いる場合、タグを何かの文字に置き換えて
> 表示するときにタグに戻すとスッキリ
> http://www.pori2.net/js/number/10.htmly


__・search__
指定<font color=#22825D>文字列</font>の位置を取得. 正規表現も可能

__・match__
検索文字の指定. 結果は<font color=#22825D>文字列</font>が出る. <font color=#E86B79>正規表現のみ</font>



## ≪配列操作≫
__・slice(n1,n2)__
<font color=#0071B0>配列</font>内の指定範囲n1番目からn2番目のひとつ前までの要素を<font color=#0071B0>新しい配列</font>として取り出す

__＊配列の最後の要素をどーのこーの__
・<font color=#22825D>〇〇</font>.slice(-1)[0] //配列の最後の要素
　　<font color=darkgray>〇〇.length-1 の代わりに 〇〇.slice(-1)[0] </font>

__＊配列の最初の要素__
__・△=<font color=#22825D>〇〇</font>[0]__ <font color=darkgray>//配列の最初の要素</font>
__・[△]=<font color=#22825D>〇〇</font>__ <font color=darkgray>//配列の最初の要素、この書き方でも(分割代入)</font>

__・splice(n1,n2,n3, …)__
<font color=#0071B0>配列</font>の途中に**追加**する場合と**削除**する場合がある：
▼要素を**追加**. 元の配列が変更される(「破壊的メソッド」)
n1に挿入する位置の左側の要素index数
第２引数n2は0でOk.(途中に追加するなら)
n3以降には挿入する要素を指定
第４引数、第５引数mと指定すれば複数の要素を挿入可. 
　　<font color=darkgray>第１引数：先頭からn個を無視
　　第２引数：第１引数の後のn個を削除
　　第３引数〜：第１引数の後に追加する要素</font>
▼要素を**削除**. index番号で指定
要素を削除する配列の削除開始位置n1を 0 から始まる番号で指定
何個削除するかをn2で指定

__・Array.toString()__
指定された<font color=#0071B0>配列</font>とその要素を表す<font color=#22825D>文字列</font>を返す. 引数はなし. 

__・<font color=#22825D>○○</font>.length__
<font color=#22825D>文字列</font>に「length」を使うと全体の文字数を取得し、結果として「何文字」の文字列であることが分かる. <font color=darkgray>※数値データにlengthを使うとエラー</font>
　<font color=darkgray>関数に「length」を使うと引数の数を取得することが可能
　　↓
　引数の数で条件分岐なども出来るようになる</font>

　
<font color=#B22222>__＊配列からundefinedの値を持つ要素を削除__</font>
重複がある場合( undefinedが2つ以上あってそれも全部削除)
削除を行ったら変数「i」をデクリメントすれば削除漏れを防げる

```js:js
//配列をループして値を照合して要素を削除
for(i=0; i<〇〇.length; i++){
    if(〇〇[i] == undefined){
        //spliceメソッドで要素を削除
        〇〇.splice(i--, 1);
    }
}
```

　　
<font color=#B22222>__＊配列から空要素を削除__</font>
<font color=mediumseagreen>__1) filterを使う__</font>
<font color=darkgray>const 〇〇 = ['1', '', '2', '', '3', ''];
const △△=〇〇.filter(function(e) {return e !==''} ); 
//▼アロー関数で短く書いてこう！
const △△=〇〇.filter(e=> e !=='' );</font>

<font color=mediumseagreen>__2) grepを使う (空要素,数字の0,undefined,falseも削除)__</font>
<font color=darkgray>const 〇〇 = [ 〜省略〜 ];
const △△= 〇〇.grep(a, function(e) {return e });</font>

__・split('<font color=#22825D>◯</font>' ,0);__
対象<font color=#22825D>文字列</font>を引数で指定した<font color=#22825D>◯</font>で区切って取得しそれぞれを<font color=#0071B0>配列</font>の要素として格納.
→例) 改行ごとに区切って配列化して処理を行ったり
<font color=darkgray>2番目の引数は分割する回数. 負の値(-1)を指定した場合は制限無し、
0を指定した場合、分割された後で最後の項目が空白の場合にはそれを配列に格納しない
例）```split(',',0)``` ※｢,(カンマ)｣の位置で区切って
　　```split('|',0)``` ※｢|｣の位置で区切って</font>

__・join('<font color=#22825D>◯</font>')__
<font color=#0071B0>配列</font>のすべての要素をつないで<font color=#22825D>文字列</font>に. 引数で指定した<font color=#22825D>◯</font>でつなぐ. 
→例) splitで(文字列から)配列化してたものを、また文字列として出力とか
例）``` join()``` <font color=darkgray>※何も指定しなかったら｢,(カンマ)｣で繋ぐ</font>
　　``` join('')``` <font color=darkgray>※空文字を使ったら隙間なく繋ぐ</font>
　　``` join('と')```、```join('、')``` <font color=darkgray>※任意の文字でつなぐ
　　↑任意の文字｢と｣、↑任意の文字｢、(句点)｣</font>



__＊追加__
__・unshift()__
<font color=#0071B0>配列</font>の先頭に要素を追加.

__・push()__
<font color=#0071B0>配列</font>の最後に要素を追加.


__＊先頭を削除__
・shift()
<font color=#0071B0>配列</font>の先頭を削除. 元の配列が変更される

__＊削除__
__・push()__
<font color=#0071B0>配列</font>の先頭を削除して詰める.

__・pop()__
<font color=#0071B0>配列</font>の最後の要素を削除して詰める.
<font color=darkgray>→例) 配列の最後の空要素やカンマを削除したり. 
　`split('\n')`や`split(',')` ※改行やカンマ区切りで区切ってデータとした場合に空要素が入る場合のその削除</font>