ホーム > Vue > How to determine if the first character of a string is a specific character in Javascript (Vue.js)
Vue
How to determine if the first character of a string is a specific character in Javascript (Vue.js)
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
- What we are going to do
- ① How to take the first character in Javascript
- ② Comparing if the first character is "か"
- ③ Keeping only strings that start with "か" in an array
- ④ Keeping only strings that start with "か" in an associative array
- ⑤ Displaying the filtered list in Vue
- ⑥ Want to do it with characters other than "か"
- Complete (all)
- Related Articles
- Summary
オススメ本
I will write about how to determine if the first character of a string is a specific character in Javascript.
⇨ Click here for the table of contents for Vue articles
What we are going to do
"I completely understood."
We will determine if the string starts with "か".
① How to take the first character in Javascript
Using charAt
const text = "かんぜんに理解した"
const firstText = text.charAt(0)
console.log(firstText)
//かThe index 0 specifies the position of the character.
② Comparing if the first character is "か"
const text = "かんぜんに理解した"
const firstText = text.charAt(0)
if (firstText === "か") {
console.log("I understand")
} else {
console.log("I did not understand. What a pity.")
}
//I understand③ Keeping only strings that start with "か" in an array
You can use filter for this.
Reference: How to extract data from an array using filter in Vue (Javascript)
const texts = [
"かんぜんに理解した",
"きんぜんに理解した",
"くんぜんに理解した",
"けんぜんに理解した",
"こんぜんに理解した",
]
const filteredTexts = texts.filter(text => {
const firstText = text.charAt(0)
if (firstText === "か") {
console.log("I understand")
return text
} else {
console.log("I did not understand. What a pity.")
}
})
console.log(filteredTexts)Output
["かんぜんに理解した"]④ Keeping only strings that start with "か" in an associative array
const texts = [
{
name: "Me",
content: "かんぜんに理解した",
},
{
name: "Me2",
content: "きんぜんに理解した",
},
{
name: "Me3",
content: "くんぜんに理解した",
},
{
name: "Me4",
content: "けんぜんに理解した",
},
{
name: "Me5",
content: "こんぜんに理解した",
},
{
name: "Me6",
content: "かかかかかかか",
},
]
const filteredTexts = texts.filter(text => {
const firstText = text.content.charAt(0)
if (firstText === "か") {
console.log("I understand")
return text
} else {
console.log("I did not understand. What a pity.")
}
})
console.log(filteredTexts)Output
0:
content: "かんぜんに理解した"
name: "Me"
1:
content: "かかかかかかか"
name: "Me6"⑤ Displaying the filtered list in Vue
Display the filtered list using computed.
<template>
<div v-for="text in filterTexts" :key="text.name">
{{ text.name }} is {{ text.content }}
</div>
</template>
<script>
export default {
data() {
return {
texts: [
{
name: "Me",
content: "かんぜんに理解した",
},
{
name: "Me2",
content: "きんぜんに理解した",
},
{
name: "Me3",
content: "くんぜんに理解した",
},
{
name: "Me4",
content: "けんぜんに理解した",
},
{
name: "Me5",
content: "こんぜんに理解した",
},
{
name: "Me6",
content: "かかかかかかか",
},
],
}
},
computed: {
filterTexts() {
return this.texts.filter(text => {
const firstText = text.content.charAt(0)
if (firstText === "か") {
console.log("I understand")
return text
} else {
console.log("I did not understand. What a pity.")
}
})
},
},
}
</script>Result display
Me is かんぜんに理解した
Me6 is かかかかかかか⑥ Want to do it with characters other than "か"
Prepare the initial character in data and try changing it with a select tag.
Only the differences will be written.
Added to data
//Initial value
first: "か",Modify one place in computed function
Compare with the newly defined first in the if statement.
if (firstText === this.first) {Select tag for choosing the initial character
<select v-model="first">
<option>か</option>
<option>き</option>
<option>く</option>
<option>け</option>
<option>こ</option>
<option>あ</option>
</select>Display result
こ
Me5 is こんぜんに理解したComplete (all)
<template>
<div class="container">
<!-- Select the initial character -->
<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 }} is {{ text.content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
first: "か", //Which initial character to display
texts: [
{
name: "Me",
content: "かんぜんに理解した",
},
{
name: "Me2",
content: "きんぜんに理解した",
},
{
name: "Me3",
content: "くんぜんに理解した",
},
{
name: "Me4",
content: "けんぜんに理解した",
},
{
name: "Me5",
content: "こんぜんに理解した",
},
{
name: "Me6",
content: "かかかかかかか",
},
],
}
},
computed: {
filterTexts() {
return this.texts.filter(text => {
//Determine the initial character here
const firstText = text.content.charAt(0)
if (firstText === this.first) {
console.log("I understand")
return text
} else {
console.log("I did not understand. What a pity.")
}
})
},
},
}
</script>Related Articles
⇨If you don't understand Computed, click here
⇨If you don't understand filter, click here
Summary
I apologize for the code-heavy content!
If you have any complaints or corrections, please contact me via DM on Twitter below.
That's all!
Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!
