Dwight Watson's blog

Escape string interpolation in ES6

This blog post was originally published a little while ago. Please consider that it may no longer be relevant or even accurate.

I ran into an issue with string interpolation in ES6 and Vue.js today where it was trying to interpolate something that I wanted to be left as it was. I wanted to show a dollar sign followed by a Vue.js binding which looks a lot like the string interpolation syntax: ${}.

`<span>${{ coupon.amount }}</span>`

However, escaping this interpolation is easy - you simply add a backslash \ in front of either the dollar symbol $ or the opening brace {.

// Before the $
`<span>\${{ coupon.amount }}</span>` // Or before the {
`<span>$\{{ coupon.amount }}</span>`;

Alternatively, it's worth noting that if you've run into the same issue as me (dealing with a dollar amount in Vue.js) then you can instead use the currency filter which side-steps the issue altogether.

`<span>{{ coupon.amount | currency }}</span>

A blog about Laravel & Rails by Dwight Watson;

Picture of Dwight Watson

Follow me on Twitter, or GitHub.