JavaScriptで文字列処理まとめ(+動作確認付き)

javascriptを勉強するならMDNが最強っていうかMDN以外の情報の信頼性がなさすぎる。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String






文字列の長さ取得


"てst".length
".length

結果 :



リンクタグの作成


"google".anchor("https://www.google.co.jp")

戻り値
google

"google".anchor("https://www.google.co.jp")

"".anchor("")

結果 :


こんなものがあるのか
そのほかにbold(太字)やstrike(取り消し線)もあるが非推奨?


文字列結合


"con".concat("cat")
重いらしいので使わない
普通に連結する
"con"+"cat"

"test".concat( "" )

結果 :



文字列が指定した位置から末尾が一致するか確認する


"endsWith".endsWith("With") // 末尾チェック
"endsWith".endsWith("dsW", 5) // endsW の末尾チェック

"endWith".endsWith( "" )

結果 :



指定した位置から先頭が一致するか確認する


"startWith".startsWith("start")
"startWith".startsWith("With", 5)

"startWith".startsWith( "" )

結果 :



文字列の存在チェック


"test".includes("es")
いわゆるcontains
IEやOperaでは対応していないらしい
全ブラウザで対応した場合は下記のindexOfを使用する

"test".includes( "" )

結果 :



文字列が出現した位置を返す


"test".indexOf("es") !== -1
基本文字列の存在チェックに使う

"test".lastIndexOf("es") !== -1
で末尾から検索

"test".indexOf( "" )

結果 :




正規表現による文字列のマッチング


"test".match("t.*t")

マッチした値が配列で返ってくる
存在チェックなどに使用する。

"test regex".match( "" ) !== null

結果 :



正規表現に一致する文字列の位置を返す


"test".search("t.*t") !== -1
これも存在チェックに使用する。

"test regex".search( "" )

結果 :



文字列の置き換え


"replace test".replace("replace", "置き換え")

戻り値
"置き換え test"

正規表現も可能
"replace test".replace(/(re.*ce )(test)/, "○$1○$2")

戻り値
"○replace ○test"

"replace test".replace( "", "" )

結果 :


ちょっと複雑なので詳しくは以下を参照
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace



文字列の切り出し


"slice test".slice(6) // 6文字目から最後まで切り出し
戻り値
"test"

"slice test".slice(6, 9) // 6文字目から9文字目を切り出し
戻り値
"tes"
マイナスを指定した場合末尾からになる。

"slice test".slice( , )

結果 :



指定した位置からn文字切り出し


"substr() test".substr(9, 4)
戻り値
"test"

上記と場合によって使い分け

"substr() test".substr( , )

結果 :



開始位置と終了位置から文字列切り出し


"substring test".substring(10, 14)
戻り値
"test"

"substring test".substring( "", "" )

結果 :




文字列分割


"split,test".split(",")

配列で返ってくる
["split". "test"]

"".split( "," ).join("_")

結果 :




大文字から小文字へ変換


"TEST".toLowerCase()

"".toLowerCase()

結果 :



小文字から大文字へ変換


"test".toUpperCase()

"".toUpperCase()

結果 :




両端の空白削除


"   test  ".trim()
戻り値
"test"
半角、全角スペース、タブなどもトリムされる。

"".trim()

結果 :



左の空白削除


" test".trimLeft()

"".trimLeft()

結果 :



右の空白削除


"test ".trimRight()

"".trimRight()

結果 :



文字列のパディング


FireFoxでpadStartというものがあるが標準ではないので推奨されない
以下のスニペットを利用する

var num = 999
var padding = "00000"
var result = (padding + num).slice(-padding.length)
先頭に0埋めする分0を結合して末尾から0埋め桁数分切り取りといったことをしている。


numが0埋めする桁数を超える可能性がある場合は以下
var num = 999999
var padding = "00000"
var result = (num+"").length > padding.length ? num + "" : (padding+num).slice(-padding.length)
console.log(result)


結果 :




文字列をJavaScriptとして実行する


eval is evil




2017年4月9日日曜日