Vue

Javascript(Vue.js)で文字列の最初の1文字目が特定の文字かどうかを判別する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

Javascript で文字列の最初の1文字目が特定の文字かどうかを判別する方法について書いてみます。

⇨ Vue 記事の目次はこちら

これからやること

「かんぜんに理解した」

が、「か」から始まった文字列かどうかを判別します。

①Javascript で頭文字を取る方法

charAt を使う

const text = "かんぜんに理解した";
const firstText = text.charAt(0);
console.log(firstText);
//か

0は文字の何番目かという指定です。

② 頭文字が「か」かどうかを比較する方法

const text = "かんぜんに理解した";
const firstText = text.charAt(0);
if (firstText === "か") {
  console.log("理解してます");
} else {
  console.log("理解してませんでした。残念でした。");
}
//理解してます

③ 配列の中から「か」から始まる文字列だけを残す

filter を使えば良いと思います。

[参考]⇨Vue(Javascript)で filter を使って配列から条件にあったデータだけ抽出する方法

const texts: [
  "かんぜんに理解した",
  "きんぜんに理解した",
  "くんぜんに理解した",
  "けんぜんに理解した",
  "こんぜんに理解した"
];
const filteredTexts = texts.filter((text) => {
  const firstText = text.charAt(0);
  if (firstText === "か") {
    console.log("理解してます");
    return text;
  } else {
    console.log("理解してませんでした。残念でした。");
  }
});
console.log(filteredTexts);

出力結果

["かんぜんに理解した"]

④ 連想配列の中から「か」から始まる文字列だけを残す

const texts = [
  {
    name: "ぼく",
    content: "かんぜんに理解した",
  },
  {
    name: "ぼく②",
    content: "きんぜんに理解した",
  },
  {
    name: "ぼく③",
    content: "くんぜんに理解した",
  },
  {
    name: "ぼく④",
    content: "けんぜんに理解した",
  },
  {
    name: "ぼく⑤",
    content: "こんぜんに理解した",
  },
  {
    name: "ぼく⑥",
    content: "かかかかかかか",
  },
];

const filteredTexts = texts.filter((text) => {
  //ここでcontentプロパティを指定するだけ
  const firstText = text.content.charAt(0);
  if (firstText === "か") {
    console.log("理解してます");
    return text;
  } else {
    console.log("理解してませんでした。残念でした。");
  }
});
console.log(filteredTexts);

出力結果

0:
content: "かんぜんに理解した"
name: "ぼく"

1:
content: "かかかかかかか"
name: "ぼく⑥"

⑤ Vue で残った一覧を表示する

computed で filter したやつを、表示します。

<template>
  <div v-for="text in filterTexts" :key="text.name">
    {{ text.name }}は{{ text.content }}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        texts: [
          {
            name: "ぼく",
            content: "かんぜんに理解した",
          },
          {
            name: "ぼく②",
            content: "きんぜんに理解した",
          },
          {
            name: "ぼく③",
            content: "くんぜんに理解した",
          },
          {
            name: "ぼく④",
            content: "けんぜんに理解した",
          },
          {
            name: "ぼく⑤",
            content: "こんぜんに理解した",
          },
          {
            name: "ぼく⑥",
            content: "かかかかかかか",
          },
        ],
      };
    },
    computed: {
      filterTexts() {
        return this.texts.filter((text) => {
          const firstText = text.content.charAt(0);
          if (firstText === "か") {
            console.log("理解してます");
            return text;
          } else {
            console.log("理解してませんでした。残念でした。");
          }
        });
      },
    },
  };
</script>

結果表示

ぼくはかんぜんに理解した
ぼく⑥はかかかかかかか

⑥ 「か」以外の頭文字でもやりたい

data で頭文字を指定しておいて、セレクトで変更してみます

差分だけ書きます。

data に追加

//初期値
first: "か",

computed の関数を1箇所変更

if 文のところを今定義した first と比較するようにします。

if (firstText === this.first) {

select タグで頭文字を選べるようにする

<select v-model="first">
  <option></option>
  <option></option>
  <option></option>
  <option></option>
  <option></option>
  <option></option>
</select>

表示結果

こ
ぼく⑤はこんぜんに理解した

完成型(全部)

<template>
  <div class="container">
    <!-- 頭文字をセレクトできる -->
    <select v-model="first">
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
    </select>
    <div v-for="text in filterTexts" :key="text.name">
      {{ text.name }}は{{ text.content }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        first: "か", //なんていう頭文字を表示するか
        texts: [
          {
            name: "ぼく",
            content: "かんぜんに理解した",
          },
          {
            name: "ぼく②",
            content: "きんぜんに理解した",
          },
          {
            name: "ぼく③",
            content: "くんぜんに理解した",
          },
          {
            name: "ぼく④",
            content: "けんぜんに理解した",
          },
          {
            name: "ぼく⑤",
            content: "こんぜんに理解した",
          },
          {
            name: "ぼく⑥",
            content: "かかかかかかか",
          },
        ],
      };
    },
    computed: {
      filterTexts() {
        return this.texts.filter((text) => {
          //頭文字をここで判別している
          const firstText = text.content.charAt(0);
          if (firstText === this.first) {
            console.log("理解してます");
            return text;
          } else {
            console.log("理解してませんでした。残念でした。");
          }
        });
      },
    },
  };
</script>

関連記事

⇨Computed が分からない人はこちら

⇨filter が分からない人はこちら

まとめ

コードばかりですいません!

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは!