What is the difference between ' and ` in JavaScript and how can I get to work my code?

Question

I have this code:

<!-- language: lang-js -->var $section = $("<div>");
    $section.html([
        //Enter all your HTML code you want below
        //S = String, U = User
        '<div>',
        '<h3>User Info</h3></br>',
        `${LUname}: <span id="SUName"></span></br>`,
        '`${LRank}`: <span id="SRank"></span></br>',
        '`${LStateId}`: <span id="SStateId"></span></br>',
        '`${LAm}`: <span id="SArea_Manager"></span></br>',
        '`${LUId}`: <span id="SUId"></span></br>',
        '`${LGlobalE}`: <span id="SGlobalE"></span></br>',
        '`${LChatBanned}`: <span id="SChatBanned"></span>',
        '`${LSegmentDel}`: <span id="SSegmentDel"></span>',
        '`${LStreetChanges}`: <span id="SStreetChanges"></span>',
        '</div>'

Before and after there is another code so don't worry.

But the thing is what I want what in the code where all the html goes, I want to use one variable of the JS but I wasn't able to get it to work, it isn't extracting nothing of the JS is just taking the HTML literally.

Answer 1

Look at Template literals:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals are enclosed by the back-tick ( `` ) (grave accent) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between them get passed to a function. The default function just concatenates the parts into a single string. If there is an expression preceding the template literal (tag here), this is called a "tagged template". In that case, the tag expression (usually a function) gets called with the processed template literal, which you can then manipulate before outputting. To escape a back-tick in a template literal, put a backslash \ before the back-tick.