HOME > Learning Place >  No.2 JavaScriptにおける文字列・文字列操作

No.2 JavaScriptにおける文字列・文字列操作

前回は、「No.1 JavaScriptの基本と値、変数、データ型」を学びました。

文字列・文字列操作

前回はデータ型や数値、エスケープシーケンスなどの様々な部分に触れていきましたが、今回は少し戻り文字列・文字列操作についてもう少し丁寧に見ていきます。

おさらいになりますが、JavaScriptにおける文字列は “”(ダブルコーテーション)または (シングルコーテーション)で文字の両端を囲うことにより文字列の定義が行えます。

文字列の定義例
1
2
3
4
5
"" // 空文字列。0文字の文字からなる文字列
"Sencha Touch"
'Sencha Ext JS'
'name="Xenophy"'
'Hello\nWorld!!'
エスケープシーケンス

JavaScriptにおける\(バックスラッシュ)は特別な意味を持ちます。 バックスラッシュの直後に特定の文字と組み合わせることにより、改行コード等の特殊な制御コードを表すことが出来、この制御文字をエスケープシーケンスと呼びます。
(制御文字として表示されるので、ページ上にそのまま表示されることはありません)

上記に載せた「文字列の定義例」の中に、このエスケープシーケンスを利用している文字列があります。

1
'Hello\nWorld!!' // 改行コード

ここでは改行コードのエスケープシーケンスを利用した文字列の定義を行っています。
この改行コードで注意が必要なのは、Webページ上に表示させる際の改行はあくまで<br>タグです。

では、この改行コードはどこで使うのか?

あくまで一例ですが、JavaScriptのalertメソッドを利用してアラートを表示させる際に、“表示内容を改行させたい”というようなシーンがあります。アラートの表示内容の改行については、<br>タグは使えない為、ここでエスケープシーケンスの\nを利用して改行させたりします。

このほかにも、シングルコーテーションで囲った文字列内にシングルコーテーションを文字として表示したい場合は、以下のような記述になります。

1
'This is a \'pen\'' // この文字列を表示させた場合:This is a 'pen'

ダブルコーテーションの中にダブルコーテーションを表示させたい場合も同じ要領で記述します。
ただ、このシングルコーテーションまたはダブルコーテーションの入れ子についてはエスケープシーケンスを利用しなくても、以下のように全体を囲う記号を変えてあげることで定義可能です。

1
2
"This is a 'pen'" // This is a 'pen'
'This is a "pen"' // This is a "pen"

このほかにも様々なエスケープシーケンスがあります。

JavaScriptエスケープシーケンス
  • \0:NUL文字
  • \b:バックスペース
  • \t:水平タブ
  • \n:改行
  • \v:垂直タブ
  • \r:復帰
  • \":ダブルコーテーション
  • \':シングルコーテーション
  • \\:バックスラッシュ
  • その他のエスケープシーケンス(MDN)
文字列の操作

JavaScripの標準機能として、文字列を連結する機能があります。数値に対して、+演算子を使用すると加算が行われますが、これと同じことを数値では無く文字列で行うと、前の文字列と後の文字列が連結されます。以下がその例になります。

1
2
3
4
5
6
var msg1 = 'Hello';
var msg2 = 'World!!';
 
console.log(msg1 + ' ' + msg2); // 出力:Hello World!!
// ↑の変数の中身を展開した場合、以下のような式になります
// 'Hello' + ' '(半角スペース) + 'World!!'

文字列の長さは、その文字列の中に含まれる文字の数で決まります。文字列の長さを取得する場合は、文字列のlengthプロパティを利用します。上記で定義した変数msg1の文字列の長さを取得する場合は以下のように記述します。

1
msg1.length // 出力:5

文字列の操作はこのほかにも色々あります。
例えば、文字列の最後の文字だけを取得したい場合などは、次のように記述します。

文字列の最後の文字だけを取得
1
last_string = msg1.charAt(msg1.length - 1) // 出力:'o'

charAtメソッドは、引数にインデックスを渡すことで、その位置にある文字を取得することができます。この例では、lengthプロパティを利用して文字の一番最後のインデックス番号を取得・指定を行っています。

また、msg1.length - 1としているのは文字列のインデックスは配列の添え字と同じ形式だからです。

  • 4文字の文字列インデックスのカウント例

    • 0, 1, 2, 3
  • 4文字の文字列からlengthプロパティで取得した値をカウントに置き換えた例

    • 1, 2, 3, 4

このように、実際の文字列のインデックスとlengthプロパティから取得した数値の数え方に若干の差違があるため、最後の1文字を取得する際にmsg1.length - 1としています。

文字列の1番目から3番目までを取得

substring(またはsubstr)メソッドを利用して、引数に開始位置と終了位置のインデックスを指定することで、指定した間にある文字列を取得することが出来ます。

1
2
3
sub_string = msg1.substring(1, 3) // 出力:'el'
// H el lo
// 0 12 34
文字列の中で最初に「l」が指定されているインデックス番号を取得する

indexOfメソッドを利用すると、引数に文字列を指定することで、対象の文字列内から引数に与えた文字列を検索し最初に合致したインデックス番号を返し、合致するものが無い場合は-1を返します。また、第2引数に検索の開始位置を指定することが可能です。
(indexOfは前方一致検索ですが、後方一致検索を行いたい場合はlastIndexOfメソッドを利用します)

1
2
3
l_index = msg1.indexOf('l') // 出力:'2'
// He l lo
// 01 2 34
文字列を配列に分割する

splitメソッドを利用すると、引数に与えた区切り文字を使用して文字列を配列に分割してくれます。例として、ある画像ファイルのファイル名をRatinaディスプレイ用の画像ファイル名に変換してみます。

1
2
3
4
5
6
7
8
9
10
11
12
var imagePath = '/example/assets/images/logo.png',
    parse = [],
    filename = '',
    extension = '',
    ratinaPath = '';
 
parse = imagePath.split('.'); // 出力:['/example/assets/images/logo', 'png']
filename = parse[0] + '@2x';
extension = '.' + parse[1];
ratinaPath = filename + extension; 
 
console.log(ratinaPath); // 出力:'/example/assets/images/logo@2x.png'

ここでは紹介しきれませんが、この他にもたくさんのメソッドが用意されています。
詳しくは String – JavaScript | MDN のメソッド部分 をご覧ください。

数値から文字列への変換

JavaScriptにおける数値は、必要に応じて自動的に文字列に変換される場合があります。例えば、文字列連結をしている式の中に数値が混ざっていた場合は、それは文字列に変換されます。

1
2
var num = 900;
var str = num + 'yen!!'; // 結果:'900yen!!'

この自動的に変換される機構を利用して、数値とから文字列を連結し、数値を文字列に変換するという手法がよく使われます。

1
2
var num = 100;
var str = num + ''; // 結果:'100'

その他にも、数値を文字列に変換する手段としてString関数toStringメソッドを利用する方法もあります。

1
2
3
var num = 100;
var str1 = String(num);
var str2 = num.toString();
文字列から数値への変換

先ほどとは逆に、数値が必要と思われる場面で文字列を使用すると、対応する数値に自動的に変換してくれます。

1
var num = '5' * '8'; // 結果:40

先ほどは数値を文字列に変換していましたが、今度はこの機構を利用して文字列を数値に変換します。

1
2
var str = '1500';
var num = str - 0; // 結果:1500

ここで -0 としているので、その逆の +0 をしても大丈夫そうに思えますが、それをやってしまうと文字列連結されてしまい、想定したものと違う値になってしまいます。

こちらに関しても、先ほどと同様に文字列を数値に変換するNumber関数parseIntメソッドparseFloatメソッドを利用することができます。 (parseIntメソッドを利用する場合は、小数点以降が切り捨てられますので小数点を含んだ形で変換する場合はparseFloatメソッドを利用しましょう。例は以下の通りです。)

1
2
3
4
var str = '1.23456';
var num1 = Number(str); // 結果:1.23456
var num2 = parseInt(str); // 結果:1
var num3 = parseFloat(str); // 結果:1.23456

JavaScriptにおける文字列・文字列操作は、ここまでになります。 まだまだ伝え切れていない部分などもありますので、さらに詳しく知りたい方はMDNなどをご覧になってみると良いと思います。

次回は、論理値・関数の基本部分について触れていきます。

Learning Placeトップに戻る

PAGETOP