Equality of ES6 Template Literal VS concatenated string

Question

let x = ‽; // "‽" Could be any type(String, Array, Object, ...) The goal is to make the statement true 

`${x}` !=  '' + x // true

`${x}` !== '' + x // true

What should we assign to X to make the statements true?

I'm thinking it's not possible to make it true, but is there any exception?

@NinaScholz Would you please explain? I tried a different type of value other than String but it always goes false since at the end it turns to String. `x = []; '' + x === ''` — Pooria Han, Apr 04 '21 at 09:45
please add the character as string to the question. actually it looks like a variable. — Nina Scholz, Apr 04 '21 at 09:47
@PooriaHan It’s not about types; you should just clarify that you use `‽` as a placeholder. — Sebastian Simon, Apr 04 '21 at 09:47

score 4 · Accepted Answer · answered Apr 04 '21 at 12:07

4

You need a value that serializes to a different value every time it's converted to a string.

const x = {
  [Symbol.toPrimitive]: (y => () => y++)(0),
};

console.log(`${x}` !== '' + x);

answered Apr 04 '21 at 12:07

Felix Kling

795,719
175
1,089
1,143

Maybe a bit easier to understand for the OP: `x = { toString: () => String(Math.random()) }` - But of course unlike your solution, this one has a super-miniscule chance (1 in 9 quadrillions) of returning the same value twice - on the other hand, your solution has a 100% chance of returning the same value twice after 9 quadrillion iterations ^^ so it doesn't matter – CherryDT Apr 04 '21 at 12:18
1

Reminds me of [this](https://stackoverflow.com/q/48270127/1048572) trick question :-) – Bergi Apr 04 '21 at 12:25
@CherryDT: Yeah, I had `Math.random` first :D – Felix Kling Apr 04 '21 at 15:13

score 4 · Answer 2 · answered Apr 04 '21 at 18:12

Felix's answer covers one absolutely valid approach, but I'll add another one here that doesn't require incrementing or random values.

`${x}`

converts x to a string using ToString, which in the case of x being an object, does ToPrimitive(argument, string).

'' + x

on the other hand uses ApplyStringOrNumericBinaryOperator, which does ToPrimitive(rval).

You can take advantage of that difference in the 2nd parameter of the function. For example:

x = {
  [Symbol.toPrimitive](hint) {
    if (hint === "string") {
      return 'a';
    } else {
      return 'b';
    }
  },
};

and now in this case

`${x}` === 'a' // true
'' + x === 'b' // true

You can also see this without Symbol by directly using toString and valueOf:

x = { 
  toString(){ return 'a'; }, 
  valueOf(){ return 'b'; },
};

which produces the same thing as the last example, because valueOf is the default unless a string value is explicitly hinted, as in the case for ${x}.

I was actually wondering whether one of those two operations prefers "the other" conversion method first but didn't bother to look. Nice one. — Felix Kling, Apr 04 '21 at 20:31
@FelixKling It's definitely not one I'd know either except that it came up as a bug for Babel's template string compilation way back, since it originally output a chain of `+` operations. — loganfsmyth, Apr 04 '21 at 22:01

Equality of ES6 Template Literal VS concatenated string

2 Answers2