VIDEO LESSON

JavaScriptのString.prototype.trim()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:32動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はトリムを紹介します。
0:02これは、文字列の両端にある空白を取り除くメソッドです。
0:06たとえば利用者が入力欄に名前を入れるとき、前後に余分なスペースや改行が付いてしまうことがあります。
0:13トリムを使うと、その両端の空白だけをすっきり取り除けます。
0:17この動画では、書き方と引数と戻り値、記事の基本例である名前の整形、空白だけの文字列が空になる境界例、
0:23片側だけを取り除く関連メソッドとの違いまで、実行結果と一緒に学びます。
0:29地味ですが、入力処理では欠かせない道具です。
0:32フォームやファイルから読み込んだ文字列では、ほぼ毎回のように出てくる処理です。
0:37まずは、両端だけが変わるという一点を、実行結果で確かめましょう。
0:42まず動作環境を確認します。
0:43トリムは古くから使える文字列メソッドです。
0:46クロームでは四以降、エッジでは十二以降、ファイアーフォックスでは三・五以降、
0:50サファリでは五以降で使えます。
0:54ノード・ジェイエスではゼロ・十・ゼロ以降に対応しています。
0:58記事の互換性情報はエムディーエヌのデータに基づく目安ですが、対応範囲が非常に広いため、
1:02通常は環境を心配せず使えます。
1:06追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。
1:11迷ったときは、実際に使う環境で小さなコードを試すのが確実です。
1:16対応が広い分、古い環境向けのコードでも安心して使えるのが強みです。
1:20書き方を確認します。
1:22対象の文字列に続けてトリムと書き、カッコは空のままにします。
1:27トリムに引数はありません。
1:29除く対象は、両端の空白文字と改行文字です。
1:32戻り値は、両端を整えた新しい文字列で、元の文字列自体は変更されません。
1:38スライドの例では、前後に空白が二つずつ付いたハローが、空白のないハローになり、
1:43長さも九から五に減ることを実機で確認しました。
1:48結果を使いたい場合は、戻り値を変数に保存するか、そのまま表示する形で使ってください。
1:54引数がない分、書き方はとてもシンプルです。
1:58戻り値の長さを比べると、空白が何文字取れたかも数字で確認できます。
2:03記事の基本例を見ます。
2:05前後に空白が付き、末尾に改行が付いた、山田太郎という名前の文字列をトリムするコードです。
2:11実行すると、山田太郎とだけ表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:18名前の中にある空白は残っている点にも注目してください。
2:22記事が説明するように、これは入力欄の前後に付いた空白を除く使い方です。
2:27あいさつや検索の前に、利用者の入力を整える場面で、そのまま使える形です。
2:32まずはこの基本例を手で実行してみてください。
2:36コピーした文字列や、改行を含む貼り付けでも、同じ形で整えられます。
2:40記事の境界条件の例を見ます。
2:43スペースとタブと改行だけからなる文字列に対してトリムを実行し、空文字列と等しいかどうかを比べるコードです。
2:51実行するとトゥルーとなり、記事の期待出力と同じく、空白だけの文字列は空になることが分かります。
2:58長さもゼロになることを実機で追加確認しました。
3:02利用者が空白だけを入力した場合を、未入力として扱いたいときに、この判定が役立ちます。
3:08成功例だけでなく、こうした境界条件を確かめると、実際の入力チェックへ組み込みやすくなります。
3:16この判定は、必須入力のチェックを作るときの土台になります。
3:20除かれる空白の種類を確認します。
3:23トリムが対象にするのは、文字列の先頭と末尾にある、スペース、タブ、改行などです。
3:30スライドの最初の例では、タブや改行に囲まれたジャバスクリプトが、文字だけになって返ることを実機で確認しました。
3:39一方、二つ目の例のように、文字と文字の間にある空白は残ります。
3:45エーとビーの間の空白が二つ残ることも、実機で確認済みです。
3:50つまりトリムは、文字列の中の空白をすべて消す機能ではありません。
3:55両端だけを整える道具だと覚えてください。
3:59空白をすべて消したい場合は、別の置換処理を組み合わせる必要があります。
4:05実務に近い実例を見ます。
4:06名前の入力をトリムで整えると、前後の空白が取れた山田が得られ、実機でも確認できました。
4:12さらに、空白だけの文字列をトリムして空文字列と比べるとトゥルーになるため、
4:17見た目は何か入っているのに中身は空白だけ、という入力を未入力として弾けます。
4:22メールアドレスや検索キーワードでも同じ考え方が使えます。
4:25大切なのは、トリムした結果を変数に保存して、その後の判定や保存に使うことです。
4:31整える前の値をそのまま使わないよう注意してください。
4:34検索の前に整えておくと、空白の有無で結果がぶれる事故も防げます。
4:38片側だけを取り除きたい場合の、関連メソッドを紹介します。
4:43トリムスタートは先頭の空白だけを、トリムエンドは末尾の空白だけを取り除きます。
4:49スライドでは、結果を角カッコで囲んで表示し、残った空白が見えるようにしました。
4:56トリムでは両端が消え、トリムスタートでは末尾の空白が残り、トリムエンドでは先頭の空白が残ることを、
5:01実機で確認済みです。
5:05行頭の字下げは消したいが末尾は残したい、といった場面では片側版が便利です。
5:12目的に合わせて、三つを使い分けてください。
5:15名前が似ている三つのメソッドは、消える側で覚えると迷いません。
5:20注意点を一つ確認します。
5:22トリムを呼んでも、元の文字列は変わりません。
5:25スライドの例では、トリムの結果はハイと短くなりますが、元の変数の長さは六のままで、
5:30空白が残っていることを実機で確認しました。
5:35ジャバスクリプトの文字列は変更できない決まりなので、メソッドは新しい文字列を返す形になります。
5:43そのため、結果を使いたい場合は、戻り値を別の変数に入れるか、元の変数に代入し直してください。
5:50呼んだだけで整ったと思い込むのが、よくあるミスです。
5:54変換前と変換後を並べて表示すると、違いが一目で分かります。
5:59もう二つ注意します。
6:00まず、トリムは文字列のメソッドなので、数値やヌルなど、文字列ではない値には使えません。
6:07数値に対して呼ぶとタイプエラーになることを実機で確認しました。
6:11値の出どころが決まっていない場合は、先に文字列かどうかを確認してください。
6:17次に、記事も注意しているように、トリムは途中の空白を消したり、すべての見えない文字を取り除いたりする機能ではなく、
6:23エイチティーエムエルの無害化にもなりません。
6:29危険な入力への対策は、用途に合った別の方法で行ってください。
6:33トリムでできるのは両端の整形だけだと、範囲をはっきりさせておきましょう。
6:39まとめです。
6:40トリムは、文字列の両端の空白を取り除いた、新しい文字列を返すメソッドです。
6:46判断のポイントは三つです。
6:48まず、引数はなく、除かれるのは両端のスペースやタブや改行だけであること。
6:54次に、文字の間の空白は残り、元の文字列も変わらないこと。
6:59そして、空白だけの入力は空文字列になるため、入力チェックに使えることです。
7:05まずは記事の基本例と境界例を実行し、入力の空白を一つ変えて、結果を予測してから確かめてみてください。
7:13お疲れさまでした。
7:15小さな整形を正しく行うことが、信頼できる入力処理につながります。
7:20次に学ぶ分割や検索のメソッドでも、入力を整える前処理として役立ちます。
7:26一つのメソッドを正しく使い分ける力が、着実に身についていきます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

String.prototype.trim()で文字列の両端の空白を除去する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのString.prototype.trim()の使い方：引数・戻り値・実例と注意点 →