例えばデータベース上に「中本 太郎」のような名前のデータがあったとします。
その名前データを姓名を分けて表示したい！または苗字だけ呼び出して使いたいということがあると思います。
そんなときはsplit()メソッドを使って姓名を切り離すことができます。
※名前の間を半角スペースで区切るなどあらかじめデータベースへ登録する際はルールを決めておくことが大事です。
split()メソッドとは
split() (スプリット)メソッドは文字列を分割して、分割した文字列を新しい配列として作成してくれます。
新しい配列データを作成するため元のデータは分割されることはありません。
構文
文字列.split(セパレータ, 制限)
- セパレータは正規表現などの値が入ります。「中本 太郎」の場合半角スペースで文字を分割したいので、半角スペースがセパレータとなります。
- 制限には数値が入り、いくつセパレータを利用して値を配列として受け取るか設定できます。
セパレータ、制限ともにオプションで入力しなくても動作します。
※セパレータを入力しない場合そのままの文字列が代入されます。
split()を使って姓名を分けて表示する
さっそく文字列を姓名にわけてみましょう。
See the Pen split name by Nakamoto (@programmerlife) on CodePen.
javascript抜粋
codepenに記載してありますが、こちらにsplit()メソッドを使用したJavascriptを抜粋しました。
function splitTest() {
//画面から名前データを取得
let nameID = document.getElementById(“name”);
let name = nameID.textContent;
//splitメソッドで半角スペスをセパレータにしnameデータをわける
let nameArray = name.split(” “);
//nameArrayから姓のデータのみを代入
let surname = nameArray[0];
//nameArrayから名のデータのみを代入
let givenName = nameArray[1];
//inputタグへ名前データをそれぞれ配置
document.getElementById(“surname”).value = surname;
givenNameID = document.getElementById(“givenName”).value = givenName;
}
姓名を分割し苗字＋さん付けで表示する
ついでなので簡単に苗字にさん付けをして表示させる方法です。
document.getElementById(“surname”).value = surname + “さん”;
紹介するほどでもなかったですね。
おまけ split()の面白い分け方
参考元がsplit()を使って分けていた例文が面白かったのでついでに紹介します。
let str = “Programmer Life”;
let test = str.split(“”);
console.log(test);
結果
[“P”, “r”, “o”, “g”, “r”, “a”, “m”, “m”, “e”, “r”, ” “, “L”, “i”, “f”, “e”]
セパレータに空の値を設定すると1文字ずつ文字を分けて配列にしてくれるんですね。なんか可能性を感じさせますね。
おわり
splitはボーリングをしていたら耳にする英語なのでなんとなく言葉で機能をイメージもしやすいのではないでしょうか。
split()メソッドは簡単に文字を分けられるので使っててなんだか楽しくなりますね。
参考
https://www.w3schools.com/jsref/jsref_split.asp
