🟦[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記法の｢コード｣をコード部分で使ってないことが多いです。
・これは、初めの頃、一言一句(大文字と小文字さえ)違ったらいけないカ所と、(引数,変数など)自分で命名できるヶ所の違いが、例文や構文として出てる記述方法だとよく分からなかったからです。よく分からないというのは具体的には、単に斜体、引数(の長ったらしい説明文)、barとかfooとか(自分にとって全く)馴染みのない単語が変数例として当然のように出てくること、などです...
※色付き：
変数とか引数を色分け≒個人的にこっちの方が一目瞭然(視認性)
｢好き勝手付けていいヶ所｣の意味もある
※変数が○△□類：
｢好き勝手付けていいヶ所｣
あとbarとかfooとかよく出るけど『何なん？それ…』と常々思ってるから
↑※慣例みたいだが由来を知らないという意味で
≪いろいろ≫
＊見つける系
indexOf()、findIndex()、find()
・indexOf()
文字列や配列から指定文字列がどの位置か取得. 最初の分だけ.
一致する指定文字が見つからなかい場合は -1
〇〇.indexOf('指定文字列') //結果は数値
・findIndex()
配列から指定文字列を条件を表す関数として指定してどの位置かindex番号を取得.
〇〇.findIndex(v => v==='指定文字列') //結果は数値=配列〇〇のindex番号
※つまりアロー関数みたいになる
・find()
配列から指定文字列の要素そのものを探して取得.
〇〇.find()
→指定文字を含む要素の場合は？=調べきれてない=
〇〇.find(〇〇.indexOf('指定文字列')) // ?指定文字を含む要素の場合?
＊含む含まない(マッチするかどうか,あるかないか)
includes, indexOf、test、match、search、exec、filter
- - - «ミニまとめ» - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
includes → 含む含まない ≒ あるかないか ...をtrue/falseで返す
第二引数で検索開始位置の指定も可能
indexOf → 引数として渡された文字列 ...を検索し (正規表現は使えない)
├見つかったらその位置
└見つからなかったら-1
test → 単に 含む含まない ≒ 単にあるかないか ...をtrue/falseで返す
match → 対象文字列as正規表現 ...を配列で返す
search → 引数として渡された対象文字列as正規表現 ...を検索し
├見つかったらその位置
└見つからなかったら-1
exec → 対象文字列as正規表現...を検索し結果は配列かnull
├見つかったら、マッチした部分の文字列を取得as配列要素の0番目
└見つからなかった場合は null
filter → 配列から特定の値だけを『フィルタリング』して取り出す
replace → 対象文字列as正規表現 ...を任意の文字列に置き換える
└→ 単なる文字列 ...を任意の文字列に置き換える
※ replaceはこの記事には出てないが関連するので
- - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - //ミニまとめ - - - -
・includes
・str.includes(〇〇) ...みたいな感じで使う. 変数strの位置
文字列から指定文字列含む含まない判定. 結果はtrueかfalse.
'abc'.includes('b') // true (含む)
'abc'.includes('B') // false (含まない)
※第二引数で検索開始位置の指定も可能
'abc'.includes('a', 1) // false (含まない)
・indexOf
・str.indexOf(〇〇) ...みたいな感じで使う. 変数strの位置
本来は文字列の出現位置を出すメソッド. (正規表現は使えない)
一致する文字列が見つからなかった場合に -1 が出るので含む含まないの判定も可能.
'abc'.indexOf('a') // 0 (含む)
'abc'.indexOf('b') // 1 (含む)
'abc'.indexOf('c') // 2 (含む)
'abc'.indexOf('B') // -1 (見つからない=含まない)
・test
・/〇〇/.test(str) ...みたいな感じで使う. 変数strの位置
正規表現使用. 単にマッチするかどうかならmatch(後述)より高速動作. 結果はtrueかfalse.
(正規表現による)文字列〇〇の出現位置はわからない→出現位置を調べるならmatchかsearch
・match
・str.match/〇〇/ ...みたいな感じで使う. 変数strの位置
matchの戻り値≒結果は配列
・search
・str.search/〇〇/ ...みたいな感じで使う. 変数strの位置
match,replaceの仲間で正規表現をマッチさせるメソッド
indexOfの正規表現版のようなもの(本来は文字列の出現位置を出すもの)
・exec
・/〇〇/exec(str) ...みたいな感じで使う. 変数strの位置
execの戻り値≒結果は、あれば配列、なければnull
配列要素0番目・・・マッチした部分の文字列そのものを取得、
配列要素1番目・・・文字列の出現位置
※正規表現パターンにキャプチャグループを含めることも可能
=キャプチャグループ 詳細略=
= match, search, exec共通：なかった場合のnull =
配列(の0番目や2番目の要素)を取得しようとするとエラーになるので、実際の運用ではnullかどうかの条件分岐か例外処理など書く必要ありかもね
//●｢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
配列から特定の値だけを『フィルタリング』して取り出す.
var data =[5,6,7,8]; //という数字の配列
var result=data .filter(v => {return v <= 6;}); // 6以下の数字(6含む)
console.log(result); // [5,6]
＊重複を取り除いた配列を得る
const ○○ = [1, 2, 4, 2, 3 , 3, 2, 4, 5, 7, 5, 6, 1, 2]; //重複あり配列
例1) filterとindexOf
※この方法は元の配列○○を加工し重複のない配列○△とする
○△.filter( (val, idx ) => ○○.indexOf(val) === idx );
例2) filterとindexOf
※この方法は元の配列○○から新たに重複のない配列△△を作る
const △△=○○.filter( (val, idx, arr) => arr.indexOf(val) === idx);
例3) Set とArray.from
※この方法は元の配列○○から新たに重複のない配列△△を作る
const △△ = Array.from(new Set(○○)); //Setを生成し配列にする
例4) Setとスプレッド演算子
※この方法は元の配列○○から新たに重複のない配列△△を作る
const △△ = […new Set(○○)]; //Setを生成し配列にする
＊指定範囲の整数が要素の配列を作る
・[…Array(n).keys()]
スプレッドなんちゃらで作る. 0からn-1まで
▼例1) 1始まり60の長さ(要素数)の配列
const ○○ = [...Array(60).keys()].map(i => ++i) ];
// [1, 2, 3, 4,....,60]
▼例２) 20始まり60の長さ(要素数)の配列 ↓20始
const ○○ = [...Array(60).keys()].map(i => ++i+19) ;
// [20, 2, 3, 4,….,80]
・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; }
＊２次元配列を1次元配列にする
var ary = [[1,2,3,4,5,6,7],[8,9,10],[11,12]]; //←共通：元の2次元配列
・… (←コレ。てんてんてん、スプレッド演算子で展開)
const 〇〇=[…ary];
・Array.prototype.concat.apply
⚠︎上記 …(スプレッド演算子)で展開か下記flat使った方がラク
var ary2 = Array.prototype.concat.apply([],ary);
// [1,2,3,4,5,6,7,8,9,10,11,12];;
・□.flat(n)
nは何次元までの配列をフラット化するかを指定する数字. ES2019(ES10)で追加
const 〇〇=ary.flat(2) // [1,2,3,4,5,6,7,8,9,10,11,12];;
・□.flatMap()
配列に対して map() を行い、結果として得られた多次元配列を flat() でフラット化
この例では半角スペースで区切ってる
var arr = ["Blue Green", "Red Yellow"];
const 〇〇=arr.flatMap(x => x.split(" ")) // => ["Blue", "Green", "Red", "Yellow"];
＊配列かどうか判定
・〇〇 instanceof Array
対象〇〇が配列かどうかtrue/falseで判定. 連想配列は配列と判定されない.
例
console.log( 〇〇 instanceof Array );
・Array.isArray(〇〇)
対象〇〇が配列かどうかtrue/falseで判定. 連想配列は配列と判定されない.
例
console.log( Array.isArray(〇〇) );
＊配列のようなオブジェクトから配列を作る
・Array.of(〇〇,△△,□□)
引数に与えられた値(〇〇とか△△とか□□とか)を持った配列を作成.
(newなんちゃらで配列を作成するときとほぼ同じ)
・Array.from(□)
配列のようなオブジェクト□や反復可能オブジェクト□から新たに配列を作成.
例 ↓文字列も配列として出力する
console.log(Array.from("mojiretsu")); //配列として出力
//["m", "o", "j", "i", "r", "e","t","s","u"]
⚠︎querySelectorAll() の戻り値は Nodelist なので、forEach() が使える
⚠︎getElementsByClassName() の戻り値は HTMLCollection で forEach() 使えない
//例 ↓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() を使う 【⚠️】上記のArray.fromを使った方が簡潔
//❶配列のようなオブジェクトを取得
const anchors = document.getElementsByTagName('a');
//❷配列のようなオブジェクトを配列に変換
const anchors_array = Array.prototype.slice.call(anchors);
//↑上記は以下のように ↓まとめて記述可
const anchors_array = Array.prototype.slice.call(
document.getElementsByTagName('a')
);
＊Number関連
・toExponential()
指数形式に変換. 〜よくわからん詳細略〜
・toFixed(n)
数値を指定小数点桁数で文字列に変換. 値は四捨五入される
console.log(Math.PI); //Math.PI は円周率
//3.141592653589793（数値）
console.log(Math.PI.toFixed()); //3 (文字列)
console.log(Math.PI.toFixed(2)); //3.14(文字列)
・toPrecision(n)
指定桁数に変換
console.log(Math.PI); //Math.PI は円周率
//3.141592653589793（数値）
console.log(Math.PI.toPrecision()); //3.141592653589793（文字列）
console.log(Math.PI.toPrecision(2)); //3.1（2桁）
・toString(n)
数値から文字列（n 進数の値）への変換. nを指定しないと10進数
整数を変換する際に使われるのが一般的
＊数値の正数、ゼロ、負数を判定
・Math.sign(○)
※○が正数(ex. 1,2,3,40, …)かゼロ(ex. 0)か負数(-2, -3,-40 …)を判定
※正数の場合は1、負数の場合は-1、ゼロの場合は0
＊数値にする(整数にする)
・parseInt(○○,10)
第一引数：数値にしたいやつ ※〇〇部分は計算式でも可
第二引数：10で10進数 ※10進数以外もあるがここでは略
文字列の数字を数値にしたいときとか、明示的に数値であるとしたいとき *今後の推奨 ES2015以降
→Numberの静的メソッドになった
→Number.parseInt(○○,10) のように使う
＊数字as文字列の桁数が足りない時に先頭に0をつける
・padStart
・〇〇.padStart(4,'0'); //例) 4桁数字as文字列,足りない場合先頭に0を足す
* 文字列の長さが足りないときに指定した文字で埋めるメソッド
※第2引数を省略すると" "（半角スペース）で補われる
padStart は文字列の先頭に、padEnd は文字列の最後に文字列を付け足す
例) ↓数値の桁数が足りない時に先頭に0を付け足したい場合
console.log('6'.padStart(2, '0')); //06
文字列(≒この場合6)の長さが指定された数値(≒この場合2桁)より短い場合
足りない分だけ第2引数に指定された文字を付け足す
数値を扱うわけじゃないので
対象が数値の場合、一旦文字列としての数字にするためtoStringでもかませ
例) ↓数値なので効かない
console.log(6.padStart(2, '0')); // これは数値なので効かない
例) ↓数字部分が数値なので一旦toStringで文字列化
console.log( (6).toString().padStart(2, '0') ); //
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
↑⚠︎コッチは対象は数値のまま使える、が、結果は文字列↓
＊桁数が足りない時に先頭に0をつける 〜0とsliceを使う〜
・('0000'+○○).slice(-4); //例) 4桁数字as数値,足りない場合先頭に0を足す
例) ↓数字部分(≒この場合2桁)
console.log( ('00'+6).slice(-2)); // "06”
例) ↓数字部分(≒この場合4桁)
console.log( ('0000'+6).slice(-4)); // "0006”
注意) ↓結果は文字列 (typeofで調べることができる =詳細略=)
console.log( typeof ('0000'+6).slice(-4) ); //string ※｢string｣は文字列ってこと
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
＊数値が整数かどうか判定
・Number.isInteger
Integerというのは整数
console.log(Number.isInteger(3)); /// true
console.log(Number.isInteger(2.5)); /// false
console.log(Number.isInteger(2 ** 128)); /// true
＊大文字 or 小文字にする
・〇〇.toLowerCase() //例) A→a
・〇〇.toUpperCase() //例) a→A
＊文字列の前後にある空白や改行を消す
・trim()
"___aaa bbb ccc___".trim() // "aaa bbb ccc"
※上記例は空白部分をわかりやすく「___ 」で表してるだけ
≪エンコード/デコード≫
＊urlエンコード/デコード
・encodeURIComponent(〇〇)
文字列 → url形式(にエンコード). 引数〇〇は普通の文字列.
const str = encodeURIComponent('エン');
console.logstr); // %E3%82%A8%E3%83%B3
・decodeURIcomponent(△△)
url形式 → 文字列(にデコード). 引数△△)はurlエンコードされた文字列(下記みたいなの).
const uristr = encodeURIComponent('%E3%83%87%E3%82%B3');
console.log(uristr); //デコ
＊Unicodeエンコード/デコード
・escape(〇〇)
文字列 → Unicode形式(にエンコード). 引数〇〇は普通の文字列.
const str = escape('ユニ');
console.log(str); //%u30E6%u30CB
・unescape(△△)
Unicode形式 → 文字列(にデコード). 引数△△はUnicode形式文字列(下記みたいなの).
const unistr = unescape( ‘%u30E6%u30CB’ );
console.log(unistr); //ユニ
＊base64エンコード/デコード
*64進数化. すべてのデータをアルファベット(a~z, A~z)と数字(0~9)、一部の記号(+,/)の64文字で表す
・btoa(〇〇)
文字列 -> base64(にエンコード)
const str = btoa(ベース);
console.log(str); //44G544O844K5
・atob(〇△)
base64 → 文字列(にデコード)
const base64str = btoa(44G544O844K5);
console.log(base64str); //ベース
≪文字列切り出し≫
・substr(n1,n2)
文字列から位置指定＆文字数指定で切り出す.
引数の数字は2コ n1=切り出し位置、n2=切り出す文字数
*n1= -1 にすると末尾からの位置
*substrの切り出し位置にindexOfで出した値を使ったり
・charAt(n)
文字列から1文字だけ切り出す. 引数は切り出す位置.
・substring(n1,n2)
文字列の指定範囲の文字を切り出す. n1=開始位置、n2=終了位置
・indexOf
文字列から指定文字がどの位置か取得. 最初の分だけ.
一致する指定文字が見つからなかい場合は -1
複雑なhtmlタグを用いる場合、タグを何かの文字に置き換えて
表示するときにタグに戻すとスッキリ
http://www.pori2.net/js/number/10.htmly
・search
指定文字列の位置を取得. 正規表現も可能
・match
検索文字の指定. 結果は文字列が出る. 正規表現のみ
≪配列操作≫
・slice(n1,n2)
配列内の指定範囲n1番目からn2番目のひとつ前までの要素を新しい配列として取り出す
＊配列の最後の要素をどーのこーの
・〇〇.slice(-1)[0] //配列の最後の要素
〇〇.length-1 の代わりに 〇〇.slice(-1)[0]
＊配列の最初の要素
・△=〇〇[0] //配列の最初の要素
・[△]=〇〇 //配列の最初の要素、この書き方でも(分割代入)
・splice(n1,n2,n3, …)
配列の途中に追加する場合と削除する場合がある：
▼要素を追加. 元の配列が変更される(「破壊的メソッド」)
n1に挿入する位置の左側の要素index数
第２引数n2は0でOk.(途中に追加するなら)
n3以降には挿入する要素を指定
第４引数、第５引数mと指定すれば複数の要素を挿入可.
第１引数：先頭からn個を無視
第２引数：第１引数の後のn個を削除
第３引数〜：第１引数の後に追加する要素
▼要素を削除. index番号で指定
要素を削除する配列の削除開始位置n1を 0 から始まる番号で指定
何個削除するかをn2で指定
・Array.toString()
指定された配列とその要素を表す文字列を返す. 引数はなし.
・○○.length
文字列に「length」を使うと全体の文字数を取得し、結果として「何文字」の文字列であることが分かる. ※数値データにlengthを使うとエラー
関数に「length」を使うと引数の数を取得することが可能
↓
引数の数で条件分岐なども出来るようになる
＊配列からundefinedの値を持つ要素を削除
重複がある場合( undefinedが2つ以上あってそれも全部削除)
削除を行ったら変数「i」をデクリメントすれば削除漏れを防げる
//配列をループして値を照合して要素を削除
for(i=0; i<〇〇.length; i++){
if(〇〇[i] == undefined){
//spliceメソッドで要素を削除
〇〇.splice(i--, 1);
}
}
＊配列から空要素を削除
1) filterを使う
const 〇〇 = ['1', '', '2', '', '3', ''];
const △△=〇〇.filter(function(e) {return e !==''} );
//▼アロー関数で短く書いてこう！
const △△=〇〇.filter(e=> e !=='' );
2) grepを使う (空要素,数字の0,undefined,falseも削除)
const 〇〇 = [ 〜省略〜 ];
const △△= 〇〇.grep(a, function(e) {return e });
・split('◯' ,0);
対象文字列を引数で指定した◯で区切って取得しそれぞれを配列の要素として格納.
→例) 改行ごとに区切って配列化して処理を行ったり
2番目の引数は分割する回数. 負の値(-1)を指定した場合は制限無し、
0を指定した場合、分割された後で最後の項目が空白の場合にはそれを配列に格納しない
例）split(',',0) ※｢,(カンマ)｣の位置で区切って
split('|',0) ※｢|｣の位置で区切って
・join('◯')
配列のすべての要素をつないで文字列に. 引数で指定した◯でつなぐ.
→例) splitで(文字列から)配列化してたものを、また文字列として出力とか
例）join() ※何も指定しなかったら｢,(カンマ)｣で繋ぐ
join('') ※空文字を使ったら隙間なく繋ぐ
join('と')、join('、') ※任意の文字でつなぐ
↑任意の文字｢と｣、↑任意の文字｢、(句点)｣
＊追加
・unshift()
配列の先頭に要素を追加.
・push()
配列の最後に要素を追加.
＊先頭を削除
・shift()
配列の先頭を削除. 元の配列が変更される
＊削除
・push()
配列の先頭を削除して詰める.
・pop()
配列の最後の要素を削除して詰める.
→例) 配列の最後の空要素やカンマを削除したり.
split('\n')やsplit(',') ※改行やカンマ区切りで区切ってデータとした場合に空要素が入る場合のその削除