JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのString.trimStart()とString.trimEnd()メソッドの使い方を解説

JavaScriptには、文字列に含まれる不要な空白を取り除くための便利なメソッドが用意されています。String.trimStart()は文字列の先頭にある空白を削除し、String.trimEnd()は文字列の末尾にある空白を削除します。

どちらのメソッドも元の文字列自体は変更せず、空白を取り除いた新しい文字列を返す点に注意してください。また、先頭と末尾の両方の空白を一度に削除したい場合は、従来から提供されているtrim()メソッドを使用します。

サンプルコード

以下は、String.trimStart()とString.trimEnd()メソッドの動作を確認できるコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>String.trimStart() and String.trimEnd() methods</h1>
<div><pre class="sample"></pre></div>
<div style="color: green;"><pre class="result"></pre></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、文字列の先頭と末尾の空白が削除されます
</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let str = " HELLO WORLD ";
    sampleEle.innerHTML = str;
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = "trimStart() :" + str.trimStart() + "|<br>";
        resEle.innerHTML += "trimEnd() :" + str.trimEnd() + "|";
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、画面には前後に空白を含んだ文字列「 HELLO WORLD 」が表示され、次のような出力が得られます。

JavaScriptのString.trimStart()とString.trimEnd()メソッドの使い方を解説

「CLICK HERE」ボタンをクリックすると −

JavaScriptのString.trimStart()とString.trimEnd()メソッドの使い方を解説

ボタンをクリックすると、trimStart()によって先頭の空白が削除された「HELLO WORLD |」と、trimEnd()によって末尾の空白が削除された「| HELLO WORLD」がそれぞれ表示されます。このように、パイプ（|）を目印にすることで、空白が実際に削除されているかどうかがひと目で確認できます。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. JavaScriptでプロトタイプを使ってメソッドを共有する方法

    JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS