How to concate string and variable in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To Concatenate the string and variable in vueJS, just use the

• ES5 + oprator
• ES6 Template strings
• concat() method

Using these three solutions you can Concatenate your string and variable, it will return the join string.

Today I am going to show you How do you concate strings and variables in VueJS?

Table of contains

• Define names property for Test
• Using ES5 + oprator
• Using ES6 Template strings
• Using concat() method

Let’s start the today’s tutorial How do I concate string and variable in VueJS?

Define names array for Test

Let’s define the number in data of the FirstComponent.vue component for testing purposes.

FirstComponent.vue

<script>
export default {
    name: 'FirstComponent',
    data() {
        return{
            names : "sortoutcode",
        }
    },
}
</script>

Data is used to define properties in a particular component. In a single-file component, data() is a function that returns a set of properties that have been defined in the function.

we define the names variable you can see that.

Using ES5 + oprator

We can use the + operator to concatenate string and variable. Let’s see examples of how we can concatenate using the + operator.

FirstComponent.vue

<template>
    <div>
        <h1>Welcome to SortoutCode</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            names : "sortoutcode",
        }
    },
    mounted(){
        console.log(this.names + ".com"); // sortoutcode.com
    },
}
</script>

Let’s check the output of the + operator examples.

Output

Using ES6 Template strings

I am going to use the ES6 Template strings for that we have to understand some concept of ‘Template’. Let’s start with the Template Literals.

ES6 Template Literals use back-ticks () rather than quotes ("") to define a string.

let’s see the example of Template Literals:

Template Literals

let text = `Welcome To SortoutCode!`;

Template literals provide an easy way to interpolate variables and expressions into strings.

The method is called string interpolation.

${...}

We can use the Template strings to concatenate string and variable. Let’s see examples of how we can concatenate using the Template strings.

Template strings

<template>
    <div>
        <h1>Welcome to SortoutCode</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            names : "infinitbility",
        }
    },
    mounted(){
        console.log(`${this.names}.com`); // infinitbility.com
    },
}
</script>

Let’s check the output of Template string examples.

Output

Using concat() method

The concat() method concatenates the string arguments to the calling string and returns a new string. Changes to the original string or the returned string don’t affect the other.

And we can pass the One or more strings to concatenate our first string.

Let’s see the syntax examples:

let str1;
concat(str1, str2)

Let’s see the complete code example

concat()

<template>
    <div>
        <h1>Welcome to SortoutCode</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            names : "aguidehub",
        }
    },
    mounted(){
        console.log(this.names.concat(' ','.com'); 
        //expected output: aguidehub.com
    },
}
</script>

Let’s now check the output of the concat() Method.

Output

All the best 👍.