Handlebars template - "tilde" in if statement

Question

We have statement like:

{{~#if someCondition ~}} 
<div class="whyweneedtildehere"></div> 
{{~/if~}}

What is the difference between simple if statement and if statement with "~" in handlebars templates?

Answer 1

It is called a tilde, which might help you google it further.

The Handlebars docs answers your question in detail.

Template whitespace may be omitted from either side of any mustache statement by adding a ~ character by the braces. When applied all whitespace on that side will be removed up to the first handlebars expression or non-whitespace character on that side.

Answer 2

Here are some examples that might help you understand what ~ does.

In .js:

{
  hello: 'Hello, World!',
}

Example #1:

.hbs

<div>
  {{hello}}
</div>

.html

<div>
  Hello, World!
</div>

Example #2:

.hbs

<div>
  {{~hello}}
</div>

.html

<div>Hello, World!
</div>

Example #3:

.hbs

<div>
  {{~hello~}}
</div>

.html

<div>Hello, World!</div>

Basically, it's for removing whitespaces in the output HTML.