最新！JavaScript入門講座ー文字列の操作の基本を解説

前回は文字列の基本について解説しました。文字列はじつは様々な操作ができます。文字列を操作することによって、表現できる幅が広がります。

そこで、今回は文字列の操作の基本的なことについて解説していきます。

JavaScriptー文字列の操作1

文字列の長さを取得する

まずは、文字列の長さを取得するメソッドを解説します。

let str = "みくるちゃんは数学の微積が得意です";
let len = str.length;

let zero = "";


console.log(len);
console.log(zero.length);

$ node string.js

17
0

lengthは変数や文字列の後ろにつけることで、文字列の文字数を取得することが出来ます。文字列が空であった場合、０を返します。

文字列の分割

続いては文字列の分割を解説していきます。サンプルコードを見てみましょう。

let str = "キョン君は学校では寝ています。ですが、家ではとても勤勉です。家ではずっとITの勉強をしています。";
let div = str.split("。");

console.log(div);

$ node string.js

[ 'キョン君は学校では寝ています', 'ですが、家ではとても勤勉です', '家ではずっとITの勉強をしています', '' ]

split()は引数と言って、カッコの中に任意の文字列を入れることができます。引数に指定した文字列ごとに、文字列を分割してくれるメソッドになります。

サンプルを見てみると、読点を引数にしています。すると、元の文字列が“。”ごとに分割されていることがわかるかと思います。

さらに、このメソッドは引数に数字を追加することができます。これは、分割する最大数を指定することができます。サンプルを見てみましょう。

let str = "ハルヒ、キョン、ミクル、イツキ、ユキ";
let div = str.split("、",3);

console.log(div);

$ node string.js

[ 'ハルヒ', 'キョン', 'ミクル' ]

実行するとこのようになります。
引数としてまずは区切る文字として”、”句点を指定しています。また、二つ目の引数として、3を指定しています。

これは区切った文字列が3つまで分割し、返すという意味です。最後の区切り文字以降の文字列は含まれません。

文字列の結合

次は先ほどとは逆で文字列の結合について解説していきます。サンプルコードを見てみましょう。

let str1 = "キョン君は";
let str2 = "本日、";
let str3 = "クレジットカードを";
let str4 = "使いました。";

let str = str1.concat(str2,str3,str4);

$ node string.js

キョン君は本日、クレジットカードを使いました。

サンプルを実行すると、このような結果になります。
今回使用したメソッド、concat()は引数の文字列をすべて結合してくれるメソッドになります。サンプルで見ると、3つの文字列を一つ目の文字列に順に結合させています。

じつはこれ以外にも、文字列を結合させる方法があります。サンプルコードを実行してみましょう。

let str1 = "ハルヒは";
let str2 = "事業で";
let str3 = 1000000;
let str4 = "円の純利益を獲得した";

let str= str1+str2+str3+str4;
console.log(str);

$ node string.js

ハルヒは事業で1000000円の純利益を獲得した

実行するとこのようになります。実は、数値の計算と同じように文字列も+加算演算子で文字列を結合することができます。
こちらのほうがより直感的でわかりやすいのではないでしょうか。

文字列の置換

続いては、文字列の置換について解説していきます。

let str = "キョンはReactJSでSOS団ウェブサイトを立ち上げました";
let newstr = str.replace('ReactJS','Vuejs');
console.log(newstr);

$ node string.js

キョンはVuejsでSOS団ウェブサイトを立ち上げました

実行するとこのようになります。対象の文字列に含まれる指定した文字列を新しい文字列に入れ替えます。サンプルの場合、ReactJSをVuejsで入れ替えています。

文字列を繰り返す

続いて、指定した文字列を繰り返した新しい文字列を生成する方法を解説します。

let str = "みくる先輩";
let rep = str.repeat(10);

console.log(rep);

str = "ETF!";
console.log(str.repeat(5));

$ node string.js

みくる先輩みくる先輩みくる先輩みくる先輩みくる先輩みくる先輩みくる先輩みくる先輩みくる先輩みくる先輩
ETF!ETF!ETF!ETF!ETF!

実行するとこのようになります。
repeatメソッドは0以上の正の整数を指定します。そうすることで、回数分繰り返された文字列を取得することができます。

まとめ

では今回のまとめに入りましょう。

今回はここまでとなります。お疲れ様でした。

参考文献

文字列 · JavaScript Primer #jsprimer

文字列リテラルを使った文字列の作成から検索や置換など基本的な文字列操作について紹介します。また正規表現と組み合わせた文字列操作やタグ付きテンプレート関数を使ったテンプレート処理などについても紹介します。

jsprimer.net

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org