# Template Literals Juxtaposition and String.join

**URL:** <https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859>\
**Category:** 💡 Ideas\
**Tags:** proposal\
**Created:** [July 14, 2021, 11:41am UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859 "2021-07-14T11:41:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![yjm](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/yjm/32/753_2.png) [@yjm](https://es.discourse.group/u/yjm)\
**Post date:** [July 14, 2021, 11:41am UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859/1 "2021-07-14T11:41:47Z")

</div>

Proposal url: [proposal-template-literals-juxtaposition/README.md at main · futurist/proposal-template-literals-juxtaposition · GitHub](https://github.com/futurist/proposal-template-literals-juxtaposition/blob/main/README.md)

Try to proposal below template literals ability:

```javascript
var template = `This is `
    `in a `
    `line.`;

template === 'This is in a line.';

```

Thus be a way to enable the RegExp [Free-Spacing Mode](https://www.regular-expressions.info/freespacing.html) to JS world, like passing the joined template literal to `String.raw`.

---

<div class="post-metadata">

**Author:** ![lightmare](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/lightmare/32/843_2.png) [@lightmare](https://es.discourse.group/u/lightmare)\
**Post date:** [July 14, 2021, 2:15pm UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859/2 "2021-07-14T14:15:20Z")

</div>

> [@yjm](#):
>
> like passing the joined template literal to `String.raw`

I think that is not possible, because this is currently valid code:

```javascript
var template = String.raw`This is `
    `in a `
    `line.`;

```

The fact that it throws an error at runtime is kinda irrelevant. You can have tag functions that return functions, and those can then apply to subsequent chunks:

```javascript
function foo(strings) {
  console.log('foo', strings);
  strings.forEach(s => foo.totalLength += s.length);
  return foo;
}
foo.totalLength = 0;

var template = foo`This is `
    `in a `
    `line.`;

console.log(typeof template);
console.log(template.totalLength);

```

This makes 3 calls to `foo`. You would need to change that to just one, with the chunks concatenated in advance.

---

<div class="post-metadata">

**Author:** ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)\
**Post date:** [July 14, 2021, 3:48pm UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859/3 "2021-07-14T15:48:23Z")

</div>

See [https://github.com/tc39/proposal-string-dedent](https://github.com/tc39/proposal-string-dedent)

---

<div class="post-metadata">

**Author:** ![yjm](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/yjm/32/753_2.png) [@yjm](https://es.discourse.group/u/yjm)\
**Post date:** [July 15, 2021, 1:04am UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859/4 "2021-07-15T01:04:30Z")

</div>

Yes in the proposal I've pointed the problem and marked "discussed later".

---

<div class="post-metadata">

**Author:** ![yjm](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/yjm/32/753_2.png) [@yjm](https://es.discourse.group/u/yjm)\
**Post date:** [July 15, 2021, 2:00am UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859/5 "2021-07-15T02:00:50Z")

</div>

This cannot enable the RegExp `String.raw` with comments ability?

---

<div class="post-metadata">

**Author:** ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)\
**Post date:** [July 15, 2021, 6:56am UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859/6 "2021-07-15T06:56:58Z")

</div>

Ah, true. You can stick a comment anywhere in a template literal you like with `${''/* comment */}` tho.

---

<div class="post-metadata">

**Author:** ![claudiameadows](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/claudiameadows/32/126_2.png) [@claudiameadows](https://es.discourse.group/u/claudiameadows)\
**Post date:** [July 20, 2021, 5:10am UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859/7 "2021-07-20T05:10:23Z")

</div>

What about the alternative of allowing empty interpolations (`${}` → `${/* ... */}`) and simply ignoring them for the purpose of template literal parsing? This would also carry the benefit of allowing template-level comments within arbitrary tagged template literals without needing the tag itself to specially handle empty strings or anything like that.

---

<div class="post-metadata">

**Author:** ![theScottyJam](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/thescottyjam/32/616_2.png) [@theScottyJam](https://es.discourse.group/u/theScottyJam)\
**Post date:** [July 20, 2021, 5:57am UTC](https://es.discourse.group/t/template-literals-juxtaposition-and-string-join/859/8 "2021-07-20T05:57:54Z")

</div>

I would find treating `${}` as if nothing was there a little weird.

```javascript
> tag = parts => console.log(parts)
> tag`a${2}b${}c`
['a', 'b', 'c'] // expected result
['a', 'bc'] // actual result

```

There are some other options to solve the specific example that was originally brought up, for example, you can just concatenate raw strings together as follows:

```javascript
const r = String.raw
const template = (
  r`This is ` +
  r`in a ` + // A comment
  r`line.`
);

template === 'This is in a line.';

```

Some more complicated template tags will already support comments inside the template string. e.g. a `css` tag should support CSS-style comments.

As for wanting whitespace/comment support in regular expressions, check out [this thread](https://es.discourse.group/t/regexp-comments/616/28) that's seeking to add a verbose flag for regular expressions, to provide this kind of support.

None of these things help with the general problem, but can help out in a handful of specific situations.