文字列操作(String, RegExp, テンプレート文字列)

2022/11/13

JavaScriptで文字列操作に必要な基礎知識について解説します。文字列操作する上で「Stringオブジェクト」「RegExpオブジェクト」の知識が必須です。それぞれ利用頻度の高いメソッドについて取り上げます。

文字列操作の基礎

文字列

文字列を囲むのは ' " のどちらでも可能です。

console.log('hello')  // hello
console.log("hello")  // hello

文字へのアクセス

配列のように数値インデックスでアクセスすることができます。

console.log('hello'[0])  // h
console.log('hello'[4])  // o
console.log('あいうえお'[2])  // う

テンプレート文字列

ES2015から導入されました。
全体を バッククォート で囲みます。${} で変数や処理を埋め込むことができます。

let firstName = 'takashi'
let lastName = 'yamada'

console.log(`苗字: ${lastName} 名前: ${firstName} ${3 + 4}`)  // 苗字: yamada 名前: takashi 7

エスケープシーケンス

改行 などはエスケープシーケンスで表します。

window.alert('hello\nworld')

主なエスケープシーケンスです。

エスケープシーケンス	説明
`\n`	改行
`\t`	水平タブ
`\'`	シングルクォート
`\"`	ダブルクォート
`\\`	バックスラッシュ

StringとRegExp

JavaScriptでは以下オブジェクトが用意されています。

文字列操作用として Stringオブジェクト
正規表現操作用として RegExpオブジェクト

RegExpオブジェクトの作り方

2通りの方法でRegExpオブジェクトを作ることができます。

let str = 'ABCD'

// RegExpオブジェクトの生成
let ptn1 = new RegExp('ab', 'gi')
let ptn2 = /cd/gi

//マッチした文字位置を返す
console.log(str.search(ptn1))  // 0
console.log(str.search(ptn2))  // 2

Stringオブジェクト

length
文字列の長さを取得

console.log('hello'.length)  // 5
console.log('山田隆'.length)  // 3

substr, slice, substring
文字列の一部分を抽出

# 長さ指定
str.substr(start[, length])

# 位置指定
str.slice(beginSlice[, endSlice])
str.substring(indexStart[, indexEnd])

substr slice substring の違いは以下の利用例で確認できます。

console.log('123456789'.substr(0, 3))  // 123
console.log('123456789'.substr(1, 3))  // 234
console.log('123456789'.substr(4))     // 56789

console.log('123456789'.slice(0, 3))   // 123
console.log('123456789'.slice(1, 3))   // 23
console.log('123456789'.slice(4))      // 56789

console.log('123456789'.substring(0, 3))  // 123
console.log('123456789'.substring(1, 3))  // 23
console.log('123456789'.substring(4))     // 56789

// slice と substring の違い
// (sliceの場合、マイナスは後ろから数える)
console.log('123456789'.slice(3, -2))      // 4567
console.log('123456789'.substring(3, -2))  // 123

concat
文字列を結合

let str1 = 'xxx'
let str2 = 'yyy'
console.log(str1.concat(',', str2))  // xxx,yyy
console.log(str1.concat('', str2))   // xxxyyy
console.log(str1.concat(str2))       // xxxyyy

let strArray = ['aaa', 'bbb', 'ccc']
console.log('xxx'.concat(',', ...strArray))  // xxx,aaabbbccc

+ でも結合できます。

console.log('aaa' + 'bbb')  // aaabbb

split
文字列を分割

let str = 'aaa,bbb,ccc,ddd'

console.log(str.split())        // ["aaa,bbb,ccc,ddd"]
console.log(str.split(','))     // ["aaa", "bbb", "ccc", "ddd"]
console.log(str.split(',', 2))  // ["aaa", "bbb"]

join
分割した文字列を結合

const url = 'https://aaa/bbb/ccc/ddd'
const splitItems = url.split('/')

console.log(splitItems)           // [ 'https:', '', 'aaa', 'bbb', 'ccc', 'ddd' ]
console.log(splitItems.join('/')) // https://aaa/bbb/ccc/ddd

trim
先頭と末尾にある空白を取り除く

let str = ' aaa '

console.log(str.trim())       // 'aaa'
console.log(str.trimEnd())    // ' aaa'
console.log(str.trimStart())  // 'aaa '

indexOf
指定文字列の位置を取得

let str1 = 'xxxabcxxx'
let str2 = 'abc'
let str3 = 'ABC'

console.log(str1.indexOf(str2))  // 3
console.log(str1.indexOf(str3))  // -1

search
指定パターンのマッチ位置を取得

正規表現でパターンマッチ判定をして、マッチした箇所のインデックスを取得します。

let str1 = 'xxxa1axxxa2axxxa3axx'
let str2 = 'xxxxxxxxxxxxxxxxxxxx'
let regexp = /a.a/g
console.log(str1.search(regexp))  // 3
console.log(str2.search(regexp))  // -1

match
指定パターンのマッチ結果を配列で取得

正規表現でパターンマッチ判定をして、マッチ結果を配列で取得します。

let str1 = 'xxxa1axxxa2axxxa3axx'
let str2 = 'xxxxxxxxxxxxxxxxxxxx'
let regexp = /a.a/g
console.log(str1.match(regexp))  // ["a1a", "a2a", "a3a"]
console.log(str2.match(regexp))  // null

replace
文字列を置換

置換対象は 文字列 正規表現 のどちらでも指定可能です。

let str = 'xxxa1axxxa2axxxa3axx'
let regexp1 = /a.a/
let regexp2 = /a.a/g
let newStr = 'bbb'

console.log(str.replace('xxx', 'yyy'))     // yyya1axxxa2axxxa3axx
console.log(str.replace(regexp1, newStr))  // xxxbbbxxxa2axxxa3axx
console.log(str.replace(regexp2, newStr))  // xxxbbbxxxbbbxxxbbbxx

toLowerCase, toUpperCasebr
文字列を変換

let str = 'xxxAAA111'

console.log(str.toLowerCase())  // xxxaaa111
console.log(str.toUpperCase())  // XXXAAA111

padStart, padEnd
文字列埋め込み

let str = 'あいうえお'

console.log(str.padStart(10))         // '     あいうえお'
console.log(str.padEnd(10))           // 'あいうえお     '

console.log(str.padStart(3))          // 'あいうえお'
console.log(str.padEnd(3))            // 'あいうえお'

console.log(str.padStart(10, '123'))  // '12312あいうえお'
console.log(str.padEnd(10, '123'))    // 'あいうえお12312' 

console.log(str.padStart(7, '123'))   // '12あいうえお'
console.log(str.padEnd(7, '123'))     // 'あいうえお12'

RegExpオブジェクト｜正規表現

test
指定文字列にパターンが含まれるか判定

let str1 = 'xxxa1axxxa2axxxa3axx'
let str2 = 'xxxxxxxxxxxxxxxxxxxx'
let regexp = /a.a/g

console.log(regexp.test(str1))  // true
console.log(regexp.test(str2))  // false