Using only string values in placeholders is recommended as otherwise, the value may be wrongly displayed; for example, if an object value is directly included in a string, it will be shown as [object Object]. Using only string values can also ensure that null or undefined values are not directly displayed.

A placeholder is represented by ${}, with anything within the curly brackets treated as an executable JavaScript expression and anything outside the brackets treated as a string. To avoid unwanted implicit string coercions like [object Object], we can explicitly add a toString() call to the end of the expression, as shown below:

console.log(`${o.toString()} <- is ok`)
// [object Object] <- is ok

Bad Practice

const arg1 = [1, 2];
const msg1 = `arg1 = ${arg1}`;
const arg2 = { name: 'DeepSource' };
const msg2 = `arg2 = ${arg2 || null}`;

Recommended

const arg = 'DeepSource';
const msg1 = `arg = ${arg}`;
const msg2 = `arg = ${arg || 'default'}`;

const stringWithKindProp: string & { _kind?: 'MyString' } = 'DeepSource';
const msg3 = `stringWithKindProp = ${stringWithKindProp}`;