どうも、siinoです。
フロントエンドエンジニアを目指して勉強しているビギナーです。
皆様は健やかにお過ごしでしょうか？
僕はというと、学習することが日々多くなり、細かい部分の理解がおろそかになってしまいがちな毎日を送っています。（カイジくん...学習のしかたがへたっぴさ...)
まあそんなわけでサラッと勉強して終わりになってしまいがちなので、日々学んだことをアウトプットして理解を深めるとともに、自分用の備忘録を作っておきたいと思い筆を執った次第です。
2～3か月ぐらい前の、JS始めたての頃の自分に向けて書いている感じとも言えますね。
今回はJavaScriptで行う文字列操作の基礎のほんの一部をおさらいしたいと思います。
基礎を復習したい初学者の方は、是非一緒にコードを書きましょう！
それではLet's & GO!!
参考にしたドキュメント・教材
今回の内容のみの参考というよりは、僕がJSを体系的に学ぶ上で大いにお世話になったサイト・教材を列挙しています。
- [JSPrimer-文字列][link1]
[link1]:https://jsprimer.net/basic/string/ - [MDN Web Docs-テキストを扱う][link2]
[link2]:https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings - [Udemy講座-【JS】ガチで学びたい人のためのJavaScriptメカニズム][link3]
[link3]:https://www.udemy.com/course/javascript-essence - [JS Terakoya][link4]
[link4]:https://uncle-javascript.com/JS%20Terakoya
実行環境
テキストエディタ：VSCode
ブラウザ：Chrome 91(2021.07/11日現在の最新版）
今回はVSCodeでよしなにファイルを作成し、LiveServerを使ってローカル環境にて検証を行います。
そしてブラウザのデベロッパーツールを開き、console.log()を使って出力を確認していきます。
本編 - 文字列操作の基礎
01.文字列の作成→出力
まずはJSで文字列を出力してみましょう。
とりあえず好きな文字列を変数に格納して...
文字列をシングルクォーテーション('')、もしくはダブルクォーテーション("")で囲むのを忘れずに！
const yagi = 'しかし矢木に電流走る――！';
作成した変数を、console.logで出力してみます。
console.log(yagi); // 実行結果->しかし矢木に電流走る――！
変数に格納した文字列が表示されれば成功です!! ぜひご自分の環境でコードを書いてみてください。
（[矢木に電流][yagilink]を走らせる必要はないです。）
[yagilink]:https://dic.nicovideo.jp/a/%E9%9B%BB%E6%B5%81%E8%B5%B0%E3%82%8B
02.文字列の連結
今度は先ほど作った文字列をバラバラにして、合体させてみましょう。
下のコードでは文字列を3つに分割し、それぞれ変数に格納しています。
const sikasi = 'しかし';
const yagini = "矢木に"; //ダブルクォーテーションでも同じです
const electrocuted = '電流走る――！';
これらを一つの文字列として出力するには、結合演算子（＋）でつないであげればOK。
console.log(sikasi + yagini + electrocuted);
console.log("しかし" + "矢木に" + electrocuted); //もちろん変数に格納しなくてもOK！
結合演算子（＋）によって文字列が連結されるので、01と全く同じ結果が出力されます。
2行目のconsole.log()では、部分的に変数を使用し、あとは直接文字を入力しています。このように、変数と文字列を織り交ぜて結合させることも可能です。
03.テンプレートリテラル
02では、＋演算子を利用して文字列や変数の連結を行ってきましたが、[テンプレートリテラル][temp-lit]を使えばもっとスマートに文字列や変数を結合することが可能です。まずは論より証拠ということで、コードをご覧ください。
[temp-lit]:https://jsprimer.net/basic/data-type/#template-literal
const electrocuted = '電流走る――！';
console.log("しかし" + "矢木に" + electrocuted); // これが
//こうなる↓↓↓
console.log(`しかし 矢木に ${electrocuted}`);
こんな感じで、変数や文字列を連結するために（＋）を入力する必要がなく、とても書きやすく見通しも良くなりました。
[テンプレートリテラル][temp-lit]にはそれ以外にも以下のようなルールがあります。
- ダブルクオートやシングルクオートは使わずに、式全体をバッククォート(``)で囲む必要がある
- 文字列は直接入力できる
- 文字列や変数の連結時に＋演算子は必要ない
- ${～}で囲んだものが式として評価される。（これをつけないとただの文字列として評価されてしまう）
//テンプレートリテラル内に引数を渡すユースケース
const fn = name => {
console.log(`しかし${name}に電流走る`)
};
fn('アカギ');
上記の使用例のように、引数と文字列を合わせて出力するときにもスマートに記述を行うことができます。
名前（矢木）の部分を第一引（name）にして関数実行時に渡してあげることで、いつでも簡単に、矢木以外の誰にでも電流を走らせることができます。
04.splitとjoin
splitメソッドは文字列を特定の文字で区切って、配列にしてくれるメソッドです。
joinメソッドは、指定した区切り文字で文字の結合を行い、それを文字列として返してくれるメソッドです。
まずはsplitから見ていきます。
//イメージ
'何かしらの文字列'.split('区切りたいポイントの文字をここで指定');
//^ 対象の文字列の後に、ドットで繋いでメソッドを呼び出します。
//split実例1
const string1 = "となりのきゃくはよくかきくうきゃくだ".split('き');
console.log(string1); //実行結果-> (4) ["となりの", "ゃくはよくか", "くう", "ゃくだ"]
//指定した文字'き'をポイントにして文字列が区切られ、配列になって返ってくる。
//split実例2
const string2 = "マグロ・ハマチ・いか・タコ・あなご".split('・');
console.log(string2); //実行結果->(5) ["マグロ", "ハマチ", "いか", "タコ", "あなご"]
まず、splitの後に続くカッコ（）の中で指定した文字を文字列の中から探し出します。
そしてその文字があったポイントで文字列が区切られ、配列として返ってくることになります。
次にjoinメソッドを見てみます。基本的にはsplitメソッドとセットで使われることが多いです。
//イメージ
'何かしらの文字列'.split('区切りたいポイントの文字をここで指定').join('区切った場所に挿入したい文字を入れる');
//join実例1
const string = "となりのきゃくはよくかきくうきゃくだ".split('き').join('き');
console.log(string);
//実行結果->"となりのきゃくはよくかきくうきゃくだ"
//splitで指定した文字'き'があった場所に、joinで指定した'き'が挿入されて結果的に元通りになった。
//join実例2
const string2 = "マグロ・ハマチ・いか・タコ・あなご".split('・').join('|');
console.log(string2); //実行結果-> "マグロ|ハマチ|いか|タコ|あなご"
splitとjoinを使うことで、文字列を自由に分解、結合することが可能になります。
splitは配列を返す、joinは文字列を返す という点も重要な気がします。
今回はここまで
突然の終了。ほんとはもっとたくさんメソッドを紹介したかったのですが、記事にまとめるのは思いのほか大変なのでいったんこの辺にしておきます。
アウトプットすること自体に少しづつ慣れていき、質＆量ともに徐々に増やしていけたらなと思っています。
またこの記事については情報の抜け漏れや、間違いなども恐らくあるかと思います。その点悪しからず。
それではまた。