Javascriptの基礎 Vol.3 ビルトイン関数　文字列編

Javascriptのビルトイン関数とは？

どの言語にもビルトイン関数はあり、データを加工するのに使います。重要なのは関数（メソッド）はデータタイプによって使い分けされる必要があり、文字列のメソッド（関数）は配列には使えません。ですので、文字列、配列、オブジェクトのどのデータタイプで何がしたいのか、ということを使う時は明確にしましょう。

関数には大まかに二つの種類があることを頭に入れておきましょう

1. データそのものを加工する
2. 関数で得た計算結果を設定した変数にリターンする（元のデータはそのままで）

文字列におけるビルトイン関数の種類

全て覚えておくとコーディングの効率が良いので覚えるに越したことはありませんが、カテゴリー別におさらいして、理解して使えるようにすると早く覚えられるので、ここではカテゴリー別に解説します。

1. 文字列の文字数を知る
2. 特定の文字列を見つける、探す
3. 切り取る、取り出す、加工する
4. 連結させる
5. 文字列や大文字小文字を置き換える
6. 配列に変換する

1: 文字数を知る lengthメソッド

const myString = '今日も良い1日でした。'
console.log(myString.length)
//１１

この応用というか、長さを知ってる＝ひとつ一つにインデックスがついてるので、Javascriptでは下記のように特定のインデックスのプロパティが知ることができます。

const myString = '今日も良い1日でした。'
console.log(myString[0])
//今

これに似ているのが　charAt(position)　と　

const myString = '今日も良い1日でした。'
console.log(myString[0])
//今

2: 特定の文字列を見つける indexOf(), lastIndexOf(), search(), match()　メソッド

データベースをいじり始めると、数あるデータベースの中から特定のデータを取り出したい、という要求が現れたりします。その際に色々な見つけ方を知っておくと便利です。

メソッドのブラケット（）括弧の中にはアーギュメントと言って、値を入れることができるようになっています。入れられる値の数はメソッドによって違うので（全く入れられないものも有）、基本はぼやっと理解だけしておいて、使う時にチェックすることが多い。

indexOf()メソッドは指定したい文字列をアーギュメント、最初のインデックス番号を教えてくれます。つまり後に同じ文字列が繰り返されてても全て無視します。

• アーギュメントに文字列を指定すると、同じ文字列をその文字列の中から探し、見つかると一番最初のインデックスをリターン
• 見つからない時は−１をリターン
• アーギュメントを二つとることができ、二つ目にはサーチを始めるインデックス番号を指定できる（つまり一個目がどこにあるのかわかれば、１個目のインデックス＋文字列＋１を指定すれば２個目が探せる）
• 正規表現（Regular Expression）が使えない

const myString = 'ニューヨークに行ったら、ブロードウェイのミュジカルも楽しいけど、オフブロードウェイ、オフオフブロードウェイと名付けられてる、スケールの小さなブロードウェイも見てみよう。'
console.log(myString.indexOf('ブロードウェイ'))
//12

想像できる通りlastIndexOf()メソッドは最後のインデックス番号を教えてくれます。

const myString = 'ニューヨークに行ったら、ブロードウェイのミュジカルも楽しいけど、オフブロードウェイ、オフオフブロードウェイと名付けられてる、スケールの小さなブロードウェイも見てみよう。'

console.log(myString.lastIndexOf('ブロードウェイ'))
//70

• アーギュメントに文字列を指定すると、同じ文字列をその文字列の中から探し、見つかると一番最初のインデックスをリターン
• 見つからない時は−１をリターン
• アーギュメントを二つとることができ、二つ目にはサーチを始めるインデックス番号を指定できる（つまり一個目がどこにあるのかわかれば、１個目のインデックス＋文字列＋１を指定すれば２個目が探せる）
• 正規表現（Regular Expression）が使えない

正規表現を使いたい場合はsearch()やmatch()メソッドを使う。正規表現については後に触れますが、文字列そのものではなく、パターンを見ることができ、計算処理が速いことから経験あるプログラマーであればあるほど使うことが好まれます。

const myString = 'ニューヨークに行ったら、ブロードウェイのミュジカルも楽しいけど、オフブロードウェイ、オフオフブロードウェイと名付けられてる、スケールの小さなブロードウェイも見てみよう。'

//最初のインデックスは１２だからブロードウェイの７文字を足して
console.log(myString.indexOf('ブロードウェイ', 12+7))
//34

lastIndexOf()も同じように二つのアーギュメントがとれます。

search()はアーギュメントは一つしかとれず、文字列の指定しかできませんが、正規表現が使えます。正規表現についてはここでは触れませんが、こちらのリンクを参考にしてみてください。いずれ足していこうとは思っていますが、それまで。

英語のウェブサイトですが、正規表現をチェックする便利なウェブサイトが有り、これを活用してみるのも手です。

const myString = 'ニューヨークに行ったら、ブロードウェイのミュジカルも楽しいけど、オフブロードウェイ、オフオフブロードウェイと名付けられてる、スケールの小さなブロードウェイも見てみよう。'

console.log(myString.search('ブロードウェイ'))
//もしくは正規表現を用いて
console.log(myString.search(/ブロードウェイ/g))
//どちらも12

searchだとあまり便利に見えませんが、match()を使ってみると

const myString = 'ニューヨークに行ったら、ブロードウェイのミュジカルも楽しいけど、オフブロードウェイ、オフオフブロードウェイと名付けられてる、スケールの小さなブロードウェイも見てみよう。'

console.log(myString.match(/ブロードウェイ/g))
//Array ["ブロードウェイ", "ブロードウェイ", "ブロードウェイ", "ブロードウェイ"]

という風に指定した文字列がそのストリングの中で、何回使われているのか知ることができます。（gはオプションでグローバルをさしてこの中の全てという指示になるので、ないと一つしか答えてくれません。）

また、このオプションをgではなくiに置き換えると、大文字小文字の区別を無視という指示になり、日本語ではあまり出てきませんが、英語では大活躍です。例えばJavascriptですが、人によっては全て大文字、小文字、またはタイトルケースと言って、JavaScriptと書く人もいて、全てをカウントしたい場合は、このオプションを使った方が早くて便利です。

3: 特定の文字列を取り出したり、切り取ったりする slice(start, end), substring(start, end), substr(start, length)　メソッド

slice(start, end)

• インデックスの最初と最後で指定された文字列をリターンする （元の文字列は加工しない）
• アーギュメントには最初と最後の二つを指定できる
• アーギュメントを一つしか指定しない場合は最初から指定された数だけ切り取った残りがリターン
• マイナスも使えるので後ろから数えることができる

var str = "携帯 テレビ パソコン"
var response1 = str.slice(3, 6)
console.log(response1)
//テレビ

var response2 = str.slice(2)
console.log(response2)
//テレビ パソコン

var response3 = str.slice(-8, -4)
//後ろから数えて８個目から４個目までという意味
console.log(response3)
//テレビ

slice(0)と指定すると文字列のコピーを作ることになり、意外とよく使われる。

substring(start, end)

• sliceメソッドに似ており、違いはマイナスの値をとれないということだけ（何故存在するのかわからないメソッド）
• インデックスの最初と最後で指定された文字列をリターンする （元の文字列は加工しない）
• アーギュメントには最初と最後の二つを指定できる
• アーギュメントを一つしか指定しない場合は最初から指定されたインデックス番号までがリターン

var str = "携帯 テレビ パソコン";
var response = str.substring(3, 6);
console.log(response)
//テレビ

substr(start, length)

• sliceメソッドに似ており、違いはリターンする値の指定が、文字数でインデックス番号ではないということのみ
• インデックスの最初と文字数で指定された文字列をリターンする （元の文字列は加工しない）
• アーギュメントには値が二つ、最初と文字数
• アーギュメントを一つしか指定しない場合は最初から指定された文字数だけ切り取られる
• マイナスの値を設定すると、文字列の最後からカウントする

var str = "携帯 テレビ パソコン";
var response = str.substr(3, 6);
console.log(response)
//テレビ

replace(探したい文字列, 置き換えたい文字列)

• 文字列の中の特定の文字列を探して、指定した文字列に置き換え、結果をリターン 元の文字列は加工しない
• アーギュメントは二つ
• 正規表現（regular expression）が使える （例えばjavascript JAVASCRIPTも全てJavaScriptに変える等）
• アーギュメントには値が二つ、最初と文字数
• アーギュメントを一つしか指定しない場合は最初から指定された文字数だけ切り取られる
• マイナスの値を設定すると、文字列の最後からカウントする

var str = "携帯 テレビ パソコン";
var response = str.replace('テレビ', 'プロジェクター');
console.log(response)
//携帯 プロジェクター パソコン

trim()

• スペースを取り除いた結果をリターン　元の文字列は加工しない
• アーギュメントは取らない
• インターネットエクスプローラー８以下ではサポートしてない

var str = "携帯 テレビ パソコン";
var response = str.trim();
console.log(response)
//携帯プロジェクターパソコン

4: 連結させる concat()

concat(連結させたい文字列)

• アーギュメントに指定された文字列を全て一つの文字列として繋げた値をリターンする
• アーギュメントはいくつも指定できる
• ＋記号を使った足し算の連結と同じ働きをする

var str1 = "私の名前は";
var str2 = "ジョンと言います。";
var response = str.concat(str1, str2);
console.log(response)
//私の名前はジョンと言います。

＋の記号を使って連結させるのと一緒

var str1 = "私の名前は"
var str2 = "ジョンと言います。"
var strConcat = str1 + str2
console.log(strConcat)
//私の名前はジョンと言います。

5: 文字列や大文字小文字を置き換える toUpperCase(), toLowerCase()

日本語ではあまりみないかも知れませんが、大文字小文字の変換です。

• 文字列の全てを大文字、もしくは小文字にして、リターンする　元の文字列は加工しない
• アーギュメントには何も入れない

var str = "email";
var uppercase = str.toUpperCase()
console.log(uppercase)
//EMAIL
var lowercase = str.toLowerCase()
console.log(lowercase)
//email

配列に変換する split()

文字列を配列に変換するメソッドがJavascriptにはビルトインされてます。

• アーギュメントに指定された文字列で区切って、文字列を配列に変換した値をリターンする
• アーギュメントが空の場合はスペースも含め、一つ一つで区切った値をリターン

var str = "赤　青　黄色";
//この場合はスペースで区切る
var array = str.split(' ')
console.log(array)
 //Array ["赤", "青", "黄色"]
var str2 = "ビーチに  行こう！"
var array2 = str.split()
console.log(lowercase)
//["ビ", "ー", "チ", "に", "　", "　", "行", "こ", "う", "！"]

次は配列のメソッドについてです。