JS place the text ${ } within the given string

In my main.js file, I created a class using "use strict" like so:

class Account{

    constructor(currency){
        this.balance = 0;
        this.currency = currency;
    }
.......

   toString(){

        console.log("The balance is: ${this.currency} ${this.balance}.");
        //console.log("The balance is: ", this.currency, this.balance);
    }
}

let acc1 = new Account("USD");

When I run `acc1.toString()` in the console, the method of directly inserting variables with ${ } does not work. The second way works correctly.

Answer №1

To utilize template literals effectively, make sure to enclose your strings within backticks:

const name = "Ethan";
console.log(`Greetings ${name}`)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

One way to position a sidebar between two divs is to ensure it adjusts seamlessly to the size of the browser window when resized

In my layout, I have two grids: one for the header and one for the footer. In between these two grids, I am using a sidebar on the left side. Below is the JavaScript code I am using: function adjustSize() { var heights = window.innerHeight; docum ...

Adding dynamic attributes like pattern and title to input controls

I currently have an HTML input field that looks like this: <input type="text" value="<%= this.CustomerAcctNumber %>" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" required > Upon loading ...

What is the best method for retrieving the correct city name using latitude and longitude with the Google API?

Using the following query http://maps.googleapis.com/maps/api/geocode/json?latlng=35.6723855,139.75891482, I am able to retrieve a list of various locations based on the provided coordinates. However, I am specifically interested in obtaining only the ci ...

update the array to have just one key

Struggling with extracting only the localized names from a JSON/Array related to a popular video game. Despite being close, I can't seem to create a new array correctly. Can anyone spot what's missing in my code? const endpoint = './heroes- ...

Dealing with a Promise that receives a 404 response: What to do next?

I created a function that utilizes node-fetch to send a POST request to update a profile object in a table via an API. However, I noticed that if an invalid profileId is provided (resulting in a status 404), the promise still resolves. What would be the mo ...

Checking File Upload Progress in HTML and PHP

As a newcomer, I've been struggling to find a solution to an issue I'm facing. My concern is regarding a form that is meant to upload a file and send it via email. How can I display the progress status of the file being uploaded? It seems that us ...

The datepicker automatically updates when it reaches December

If you follow this link, you'll find a datepicker I am interested in using. There seems to be an issue when clicking on the next month button - once December is reached, the dates change but the title of the month remains the same. Similarly, when c ...

Is it possible to load the response from the $.post function, which contains GIF content, into a JavaScript Image object

How can I preload an image that the server only returns on a POST request? I want to load the image before displaying it. How can I store the result in a JavaScript object? $.post('image.php', {params: complexParamsObject}, function(result) { ...

Submitting form by double clicking and pressing enter at the same time

When using jQuery Validate to validate forms, I encounter a problem where double-clicking the submit button results in my application making two entries with the same data. This issue also occurs when pressing enter multiple times. Despite researching dif ...

What is the best method for combining this function?

Currently, I am working on a code snippet that generates a sitemap.xml file when the /sitemap.xml endpoint is accessed. database = firebase.database(); var ref = database.ref('urls'); ref.on('value', gotData, errData); fu ...

Determining the scrollWidth of a div with an absolutely positioned child div

Having some trouble determining the width of a div's content instead of the div itself. The typical solution would involve using Javascript's scrollWidth property. However, there is a complication in this case. Inside the div, another div is ab ...

Require receiving the feedback and implementing a modification in the ajax jquery graphical user interface

Currently, I am making a RESTful webservice call using jQuery AJAX and receiving the response in JSON format. Here is the jQuery HTML code: $.ajax({ url: "mcrs/object/api/Lighting", type: "POST", traditional: true, dataType: "json", ...

Revert the Vue State When Navigating Back in the Browser

Background In our checkout process, we redirect to Stripe after creating an order object through an API request. To prevent users from clicking the "checkout" button multiple times during this process, we toggle a variable value to show a loading icon whe ...

Viewing the scroll overflow element without needing to scroll it into view

I am encountering an issue with a child element styled using overflow-y: auto. Inside this element, there is a list of other objects. Occasionally, I need to scroll this list to a specific position and have been utilizing item.scrollIntoView() for this pur ...

Having trouble configuring webpack for CSS Modules? You may be dealing with an invalid configuration object

Encountering an issue while setting up webpack for CSS Modules... An error message is appearing stating that the configuration object is invalid. It seems that the output path specified as "build" is not an absolute path, which is required. Below are ext ...

How can a modal component be displayed in Nuxt3/Vue3 when it is triggered from the header component?

Currently, I am facing a challenge in calling the modal based on my header component while using nuxt3/vue3. I attempted to place the modal inside the header component and utilize the Teleport function to teleport the modal into the body based on the value ...

Creating an engaging maze game using Java programming

Currently, I am working on a Java program for a maze game. The game reads in a text file called "map" to determine the layout of the maze. Players have to navigate through the 2D array maze using user input while avoiding cave-ins (represented by Xs) and r ...

Issue with Flex property not being supported in Safari browser

.rq-search-container { position: relative; width: 100%; background: white; display: flex; flex-direction: row; align-items: flex-start; border-radius: 2px; z-index: 30; -webkit-flex: 1 0 15em; } While this code functi ...

Is it possible to animate the innerHTML of a div using CSS?

In my HTML file, I have these "cell" divs: <div data-spaces class="cell"></div> When clicked, the innerHTML of these divs changes dynamically from "" to "X". const gridSpaces = document.querySelectorAll("[data-spaces]"); f ...

Tips for adding to a list within an Asynchronous Task and retrieving the completed list once the task has concluded

I've encountered an issue with returning a list. The problem arises when I attempt to add elements to the list after querying the database. It seems that the querying process is asynchronous, causing the code to return before all the data has been ret ...