実務で使える!JavaScriptでよく使う文字列操作3選

JavaScript

こんにちは。
JavaScriptでは文字列もオブジェクトです。
そのため、文字列に対して様々な操作ができるメソッドがあらかじめ組み込まれています。

この記事では、実務でよく使われるJavaScriptの文字列操作を3つ紹介します。
単なる説明だけでなく、実務での使われ方を想定した例で解説します。
「JavaScriptについて、知識の習得は終わって実務はこれから」という人には参考になるはずです。

split()を使った文字列の分割

まずは、『split()メソッド』です。
基本的な構文は

let str = [文字列];
str.split([区切り文字列]);

です。
文字列を指定した[区切り文字列]で分割し、配列で返します。

以下はsplit()メソッドの実務例です。
区切り文字列に「?p=」や「?uid=」を指定して、URL内にある記事番号やuser IDを取り出しています。

const postUrl = "https://humanstars.jp/?p=3188";
const postArray = postUrl.split('?p=');
console.log(postArray);
// Consoleに["https://humanstars.jp/","3188"]と表示される
// humanstarsArray[1]に記事番号"3188"取り出された

const queryUrl ="https://xxxxx.com?uid=zzzzzzzz1111111"
const resultArray = queryUrl.split('?uid=');
console.log(resultArray);
// Consoleに["https://xxxxx.com","zzzzzzzz1111111"]と表示される
// resultArray[1]にuser IDの"zzzzzzzz1111111"取り出された

slice()で指定した範囲の文字列を取得する

次は『slice()メソッド』です。
slice()メソッドは開始位置と終了位置を指定して文字列を切り出します
基本的な構文は次のような形になります。

let str = [文字列];
str.slice([開始位置], [終了位置]);

[開始位置]は文字列の左から数えた位置を示します(0から始まるので注意!)。
[終了位置]は省略することが可能で、その場合は文字列の最後まで切り出されます。
また、[開始位置][終了位置]には負の数を使うことができ、その場合は文字列の終わり(右側)から数えた位置となります。

const str = "abcdefghijklmn";
const result = str.slice(-4);

console.log(result);
// Consoleに"klmn"と表示される

実務では、左側に0(ゼロ)を追加して桁数を揃えたいときにslice()メソッドが使われます。
例えば、9月2日(9/2)を09/02とする時です。

以下のコードは、銀行の口座番号の扱いを想定した例で、左側に0を追加して数字を7桁に揃えます。
銀行の口座番号は都市銀行などは7桁なのですが、地方の銀行によっては6桁の所もあります。
ネットバンキング等で振込をする時に口座番号を7桁に揃えなければエラーになることがあります。
そこで、振込先の口座番号に6桁の数字が入力された時に左端に0を追加してslice()メソッドで7桁の文字列にするのです。
この方法であれば、口座番号が6桁でも7桁でも、if文等で条件分岐することなく7桁に揃えることができます。

let accountNumber="123456";
console.log("before:" + accountNumber);
// Consoleに"before:123456"と表示される

accountNumber = "000" + accountNumber;
afterNumber = accountNumber.slice(-7); //右から7桁を切り出す
console.log("after:" + afterNumber);
// Consoleに"after:0123456"と表示される

replace()で特定の文字列を置換する

最後に『replace()メソッド』です。
replace()は、指定した文字列を置き換えるときに使います。

let str = [文字列];
str.replace([指定した文字列], [置き換える文字列]);

ここで、[置き換える文字列]に空文字('')を使うと、指定した文字列を削除することができます。

const str = "abcdefghijklmn";
const result = replace('efgh', '');

console.log(result);
// Consoleに"abcdijklmn"と表示される

このメソッドは「改行コード(\n)を<br>タグに置換する」時に使われます。
HTMLでは「\n」を改行と見なさないので、<br>タグに置換しなければ、改行なしで表示されてしまいます。

HTML

<div>
  <textarea id="text-area" rows="4"></textarea>
  <button onClick="outputHtml()">出力する</button>

  <p id="just-text-area"></p>
  <p id="result-area"></p>
</div>

JavaScript

const returnCrToBr = (text) => {
  return text.replace(/\r?\n/g, '<br>');
}

const outputHtml = () => {
  const htmlText = document.getElementById('text-area').value;
  document.getElementById("just-text-area").innerHTML = "\\nのまま:<br>" + htmlText;
  const formattedHtmlText = returnCrToBr(htmlText);
  document.getElementById('result-area').innerHTML = "brタグに置換後:<br>" + formattedHtmlText;
}

テキストエリアに改行した文字列を入力し[出力する]ボタンをクリックすると、置換前と置換後の文字列が表示されます。
置換前のテキストが改行されない文字列であることが確認できます。

想定している実務はお問い合わせフォームです。
フォームに入力後、その内容を確認する画面をよく見かけます。
改行コードを<br>タグに置換をしなかった場合は改行のない確認画面になってしまい、非常に読みにくいです。
そこで、改行コードを<br>タグに置換して改行付きの画面にするのです。

まとめ

実際の実務を想定した例を使って、JavaScriptの文字列操作を3つ紹介しました。
split()は文字列の分割」「slice()は文字列の切り出し」「replace()は文字列の置換」と単純に覚えているよりも理解が深まったのではないでしょうか。

コメント

タイトルとURLをコピーしました