0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

先頭の文字を判定して必要に応じて削除する方法(JavaScript/Vue)

Last updated at Posted at 2022-06-24

javaScriptで先頭の文字を判定して、それが特定の文字の場合削除する方法です。

例えばAPIから送られてくる値が
userName: ",山田,鈴木,吉村"
だとします。

この値をそのまま画面上に表示してしまうと先頭にカンマが表示されてしまい、よろしくありません。
画面表示の際に先頭のカンマを削除して表示するのが好ましいです。
それを実現するためにはstartsWith()メソッドとslice()メソッドを用います。

方法

まず、先頭の文字がカンマかどうかの判定を行います。
いきなり先頭の文字を削除せず。一度判定を挟むのはAPIの仕様が変わり先頭にカンマが入らなくなった場合に山田の山を削除してしまうことになるからです。
先頭の文字がカンマであるかの判定はstartsWith() メソッドを用います。

startsWith() メソッドは文字列が引数で指定された文字列で始まるかを判定して true か false を返します。
startsWith() メソッドがfalse、つまり先頭の文字がカンマでない場合はそのまま表示、startsWith() メソッドがtrueの場合、つまり先頭がカンマの場合は先頭の文字列を削除して表示する という処理を行います。
文字を削除するという処理はslice()メソッドを用います。

vue で記述すると下記のようになります。

<div v-if="this.userName.startsWith(',')">{{ this.userName.slice(1) }}</div>
<div v-else>{{ this.userName }}</div>

上記の処理で 
山田,鈴木,吉村
という表示がされるようになります。
 

参考

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?