I have
console.log('x: '+document.getElementById("x_coord").value+' y: '+document.getElementById("y_coord").value);
console.log('Slots: <?=$row['slots']?> Slot: '+parseInt(document.getElementById("x_coord").value) + parseInt(document.getElementById("y_coord").value));
the result
Short answer: do it outside of the string that you are passing to console.log.
Slightly longer answer: use modern JavaScript features (template literals) to make your code easier to read. Also, take smaller steps, checking the result as you go. For example:
const xCoord = document.getElementById('x_coord').value;
const yCoord = document.getElementById('y_coord').value;
const total = Number(xCoord) + Number(yCoord);
// You can check that you are dealing with the correct values here
console.log(`x: ${xCoord}, y: ${yCoord}`);
console.log(`Slots: <?=$row['slots']?> Slot: ${total}`);
You can insert a pair of brackets to give addition instead of concatenation:
console.log('Slots: <?=$row['slots']?> Slot: '+ (parseInt(document.getElementById("x_coord").value) + parseInt(document.getElementById("y_coord").value)));
Sorry, but why is
console.log(`x: ${xCoord}, y: ${yCoord}`);
Easier to read then
console.log('x: ' + xCoord + ', y: ' + yCoord);
For me it makes no difference if you know both notations but you are lost if you do not know literals…
I think that the ease comes from it being easier to code.
With template literals you no longer have to worry about complexities that occur from properly ending the string followed by a plus sign and the appropriate variable then another plus such, then starting up the string again, before writing something else.
Have you tried debugging problems that happen in other people’s complicated string outputs? Those problems can be come from your own code that you write several months ago when you’ve lost the details of why you did stuff and for what reason. Those problems tend to disappear when it comes to template literals. Though, it is possible that it replaces some problems with other ones.
The larger benefit of template literals tends to come when you have several different versions of them for different languages. For example:
{
hypotenuse: [
en: `A right angled triangle with sides of ${triangleside1} and ${triangleside2} has a hypotenuse of ${hypotenuse}.`,
zh: `Biān zhǎng wèi ${triangleside1} hé ${triangleside2} de zhíjiǎo sānjiǎoxíng de xié biān wèi ${hypotenuse}.`,
da: `En retvinklet trekant med siderne ${triangleside1} og ${triangleside2} har en hypotenus på ${hypotenuse}.`
fa: `مثلث قائم الزاویه با اضلاع ${triangleside1} و ${triangleside2} دارای هیپوتانوس ${hypotenuse} است.`
]
}
Might be a nice example here, but you do not seriously write translations direct into your source code?
I agree, directly in the source code is not a good idea. You would typically have one template file per language, where the literals remain consistent with the language changing around them.
Meh! In that case the difference is minimal. I still prefer interpolation as opposed to concatenation, but that might just be a preference.
The real question should be which of these is easier to read:
console.log('Slots: <?=$row['slots']?> Slot: '+parseInt(document.getElementById("x_coord").value) + parseInt(document.getElementById("y_coord").value));
Or:
console.log(`Slots: <?=$row['slots']?> Slot: ${total}`);
As Paul says,
Plus, there are several other benefits to template literals. For example, multiline strings, JavaScript expressions inside of the template placeholders, and you can use them to create your own special tag functions to which the template literal is sent and processed, instead of just being concatenated.
Template literals make it easy to create form html in dialogs.
Very useful for adding values in hidden elements and default values. And forms for editing records are simple with template literals.
There is a reason that it was added to the language.