JavaScript es6 template literals

-

Template literals are a new syntax to create strings in JavaScript

Embedding expressions in a string is now possible using template literals thus there's a new way to embed expressions into strings effectively interpolating the values done using syntax ${expression}
within a string for instance

const text = 'Hello world'
const string = `Say ${text}` // Say hello world.

You're not only limited to that you can as well perform more advanced expressions and arithmetics as well

const string = `${1 + 2}` // returns 3

strings that spawn more than one line are now possible with template literals initially the only way to create strings that spawn multiple lines was to break it up in parts the syntax below is now possible

const text = `
loading....
processing...`

Comments

Post a Comment

Popular posts from this blog

How to resume a suspended web audio api context

-
A quick JavaScript function to maneuver around Google chrome, Firefox and safari web audio context suspension state Starting from chrome v{xx} Google chrome, Mozilla Firefox and Apple safari web browsers automatically suspend html5 web audio contexts if they start without any user gesture they can only be resumed by a user gesture it's a measure implemented to improve overall user experience. context.state property stores the state of the audio context when it's suspended it's value changes to "suspended". in order to implant a maneuver first check the state of the context should it be suspended literate an array of events for each add an event listener on the document body and remove the event if one of the events has been triggered by the user let unlockAudio = function(context) {     if (context.state === 'suspended') {         let events = ['touchstart', 'touchend', 'mousedown', 'keydown']         let unlock = function(...
Read more

Ways of iterating Object properties in JavaScript

-
For Objects the ways of iterating their properties are not that plentiful as with Arrays. take for instance we have an object of dogs and cat characteristics const pets = { {name: " Jenny ", eyes: "brown"}, {name: "max", eyes: "blue"} } To iterate through the characteristics using for loop for (pet in pets) {     console.log(`${pets[pet].name} has eye color ${pets[pet].eyes}`} } Alternatively you can use objects.keys and object. entries for (element in Object.entries(elements)) }
Read more

Es6 new features summarized round up

-
Escmascript es2017 or better known as es16 is the edition after the famously popular es15, In this edition there are only two new additional features the exponention operator and Array.prototype.includes() function exponention operator ** Operator is a short hand method used for raising numbers to their power Its syntax is similar to native operators such as '+' Addition and '-' (minus) for subtraction Example usage Initially to raise a number to the power you would need to use math library pow function as; Math.pow({number}, {factor}) Since es2017 you can simplify the operation above down to simply as; {number} ** {factor} Example as; 5 ** 2 // Giving you 25 Array.prototype.includes () Array includes is a feature similar to a pre existing function array.indexof() as compared to array.indexof() array.includes() function notably returns a true  boolean on matched value, and false if value not matched Examples on how to use 'array.includes ()' funct...
Read more

How to use fetch api submit an html form

-
Fetch api allows asynchronous means of reading files and a more simplified way of making http requests in JavaScript. How to submit an existing html form using fetch api; Assuming you have html source code with a form and some input fields; <form id="form" action="./submit" method="post" onsubmit="handle(event)"> <input name="query"> <button>     submit </button> </form> You can pass an instance of a dom form to formData constructor as the first parameter; const handle = function(event) {     event.preventDefault()     const data = new formData(event.target) fetch('//localhost/api/post', {     method: 'POST',     body: data }) } Fetch api returns a new pending promise to process the response you will need to await asynchronous process once ready to consume parse it as follows; .then(response => response.json()) .then(response => console.log(response))
Read more

Introduction to Kotlin programing language

-
Kotlin is an open source statically typed programming language named after an island just like Java was named after an Indonesian island. Kotlin runs on the JVM and can compile to JavaScript. Uses for kotlin programming language Kotlin is a preferred programming language for Android application development second after Java programming language. Kotlin can be used for artificial intelligence and data science research applications. Because of its speed kotlin is a well suited programing language for web server application development. On rare occasions you can use kotlin to develop client side application simply because it can compile to JavaScript. Hello world application in kotlin programming language Kotlin applications must have a main method. println is used for text output just like in Java fun main() {     println("hello world") } After compiling the output should be "hello world" Basic s yntax variable declaration Variables are declared using ...
Read more