For example I have an object like this:

{ '#SKU_NBR': '123' }

And I want to print out the value but the simple syntax for this doesn't work:

<div>{{#SKU_NBR}}<div>

How can I escape the name of the field such that I can use it in a template expression in handlebars?

For example I have an object like this:

{ '#SKU_NBR': '123' }

And I want to print out the value but the simple syntax for this doesn't work:

<div>{{#SKU_NBR}}<div>

How can I escape the name of the field such that I can use it in a template expression in handlebars?

• javascript
• handlebars.js

• What have you tried? Does <div>{{&#35;SKU_NBR}}<div> work? – Bohemian ♦ Commented Jun 12, 2018 at 20:54
• I tried {{#SKU_NBR}} (obviously), {{\#SKU_NBR}} and {{##SKU_NBR}} Your suggestion is giving me Parse error on line 1: {{#SKU_NBR}} ---^ Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'" I do have a work around but I want to see if anyone has a better answer before posting it here. – justin.m.chase Commented Jun 12, 2018 at 21:58
• Why not just drop the # in the object key? It would seem easier to me to stick with { SKU_NBR: '123 }. – mccambridge Commented Jun 12, 2018 at 22:27
• @mccambridge Its ing out of a 3rd party CSV file and the library I'm using is just using the column names verbatim. Every row emitted from the file has this key name and I'm generically applying these templates to fields. I may end up just stripping it out but that could be annoying as they will not match the actual column names the. But I'd rather know how to escape them if its possible, if not then I will probably figure something like that out. I did manage to figure out how to do it with helpers. – justin.m.chase Commented Jun 12, 2018 at 22:35
• 2 So many possibilities. {{ "#SKU_NBR" }} or {{ '#SKU_NBR' }} or {{ [#SKU_NBR] }}. Just choose one. # is syntax prefix for handlebars's block expression. Btw its already answered on SO. – bigless Commented Jun 13, 2018 at 1:01

3 Answers 3

To elaborate on the answer from bigless, you can use any of these:

• {{ "#SKU_NBR" }}
• {{ '#SKU_NBR' }}
• {{ [#SKU_NBR] }}

These resolve the variable named within the escape characters (as opposed to just including the String #SKU_NBR).

I had a similar problem because I had variables named this and with. I found {{[this]}} worked as expected, but {{[with]}} did not. I was able to work around this by using {{this.with}}

You can use {{[@special-chars]}}.

Example: {{[#sku_no]}}

Refer to working example in handlebar tryit editor: https://handlebarsjs./playground.html#format=1&currentExample=%7B%22template%22%3A%22%7B%7B%5B%23SKU_NBR%5D%7D%7D%22%2C%22partials%22%3A%5B%5D%2C%22input%22%3A%22%7B%5Cn%20%20%5C%22%23SKU_NBR%5C%22%3A%20123456%5Cn%7D%5Cn%22%2C%22output%22%3A%22123456%22%2C%22preparationScript%22%3A%22%5Cn%22%2C%22handlebarsVersion%22%3A%224.7.8%22%7D

One way to solve this is to use a helper function. I made one called get which just gets a field based on a string.

import Handlebars from 'handlebars'
import get from 'lodash/get'

Handlebars.registerHelper('get', function (path, opts) {
    return get(opts, `data.root.${path}`)
})

const template = Handlebars.pile('{{get "#upc"}}');
const result = template({ '#upc': 'abc123' })

console.log(result) // abc123

You can use it in sub-expressions also like so:

{{tolowercase (get "#upc")}}