emfluenceindia/es6-template-literal-example.js

## es6-template-literal-example.js
<!DOCTYPE html>
<html>

<head>
    <script>
        function sum(x, y) {
            /**
              Using the conventional plus (+) opertior
              for concatenating strings.
            */
            console.log('Convemtional way: ')
            console.log('Values of x and y are: ' + x + ' and ' + y + ' respectively.');
            console.log('Sum: ' + (x + y));

            /**
              Using Template Literal approach in ES6

              IMPORTANT NOTE: The output line where String Literals (${...}) are used, are enclosed in Back-ticks (``) or Acutes
              not in single code ('') like we have in conventional method of string concatenation paaroach.
              conosle.log(`Values...${x}...`);

              Template Literals won't replace with single quotes.
            */
            console.log('ES6 way: ')
            console.log(`Values of x  and y are ${x} and ${y} respectively`);
            console.log(`Sum: ${x + y}`);
        }
    </script>
</head>

<body>
    <button onclick="javascript: sum(15, 20);">Show in console</button>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<script>
	function sum(x, y) {
	/**
	Using the conventional plus (+) opertior
	for concatenating strings.
	*/
	console.log('Convemtional way: ')
	console.log('Values of x and y are: ' + x + ' and ' + y + ' respectively.');
	console.log('Sum: ' + (x + y));

	/**
	Using Template Literal approach in ES6

	IMPORTANT NOTE: The output line where String Literals (${...}) are used, are enclosed in Back-ticks (``) or Acutes
	not in single code ('') like we have in conventional method of string concatenation paaroach.
	conosle.log(`Values...${x}...`);

	Template Literals won't replace with single quotes.
	*/
	console.log('ES6 way: ')
	console.log(`Values of x and y are ${x} and ${y} respectively`);
	console.log(`Sum: ${x + y}`);
	}
	</script>
	</head>

	<body>
	<button onclick="javascript: sum(15, 20);">Show in console</button>
	</body>

	</html>