Vue
Javascript（Vue.js）で文字列の最初の１文字目が特定の文字かどうかを判別する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
目次
オススメ本
Javascript で文字列の最初の１文字目が特定の文字かどうかを判別する方法について書いてみます。
これからやること
「かんぜんに理解した」
が、「か」から始まった文字列かどうかを判別します。
①Javascript で頭文字を取る方法
charAt を使う
const text = "かんぜんに理解した"
const firstText = text.charAt(0)
console.log(firstText)
//か０は文字の何番目かという指定です。
② 頭文字が「か」かどうかを比較する方法
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 の関数を１箇所変更
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>関連記事
まとめ
コードばかりですいません！
苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。
それでは！
