ES6 Template Literals

There are many pitfalls of working with strings on the modern web. The Javascript we know today lacks basic string formatting features, doesn’t support multi-line strings, and makes it difficult to protect users from XSS attacks when inserting user-generated content into pages.

Template Literals, introduced in this release, aims to solve these problems. Its basic form adds string formatting into Javascript by providing syntactic sugar for concatenating strings, variables, and the results of functions. Specifically, expressions can be embedded directly into strings when using the backtick operator (`).

Any code contained within the braces and preceded by the dollar sign will automatically be evaluated and inserted into place.

var message = `1 + 1 = ${1 + 1}!`; // Expected result: "1 + 1 = 2!"

Besides accepting multi-line strings, Template Literals also introduces the concept of tagged templates which are useful for escaping HTML to prevent XSS attacks and when internationalizing a site.

New features in Chrome Developer Tools

Chrome 36 added Web Animations, unifying several of the animation APIs on the web. This release makes visual debugging easier by allowing developers to slow down playback of their animations on the fly within DevTools.

In Chrome 40 we shipped Service Workers, enabling developers to make their sites load faster and work offline by intercepting network requests to deliver programmatic or cached responses. Until now, developers had to inspect their Service Worker’s cache manually by printing out its contents to the console, making debugging slow. Today’s Beta includes a new section in DevTools for viewing Service Worker caches which can be found by inspecting a Service Worker on chrome://serviceworker-internals.

Other updates in this release

ES6 Lexical Declarations cause variables declared with the 'let' keyword to be scoped to their containing block instead of being hoisted to the top of their containing function, giving developers more control over Javascript's tricky scoping rules.

The new CSS value image-rendering: pixelated allows scaled images to appear to be composed of very large pixels, trading smooth results for faster image scaling.

CSS Media Queries now support any-pointer and any-hover, which function similarly to pointer and hover but can be triggered by any input device, not only the primary one.

HTTPS sites that have certificate chains using SHA-1 that are valid past January 1st, 2017 will be treated as “affirmatively insecure” in Chrome UI from this release onwards as part of our plan to gradually sunset SHA-1.

Update February 13th: The new CSS values mix-blend-mode and isolation provide control over how an HTML or SVG element blends with the content behind it.