JavaScript 模板字符串

简介: JavaScript 模板字符串

JavaScript 中的模板字符串是一种方便的字符串语法,允许你在字符串中嵌入表达式和变量。

模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量。

模板字面量是用反引号(`)分隔的字面量,允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。

语法

`string text`


`string text line 1

string text line 2`


`string text ${expression} string text`


tagFunction`string text ${expression} string text`

参数

  • string text:将成为模板字面量的一部分的字符串文本。几乎允许所有字符,包括换行符和其他空白字符。但是,除非使用了标签函数,否则无效的转义序列将导致语法错误。
  • expression:要插入当前位置的表达式,其值被转换为字符串或传递给 tagFunction。
  • tagFunction:如果指定,将使用模板字符串数组和替换表达式调用它,返回值将成为模板字面量的值。

实例

let text = `Hello RUNOOB!`;


尝试一下 »

浏览器支持

模板字面量是 ES6 新特性 (JavaScript 2015),目前一些最新版本浏览器都支持:

Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

模板字符串中可以同时使用单引号和双引号:

实例

let text = `He's often called "Runoob"`;


尝试一下 »

模板字符串还支持多行文本,而无需使用特殊的转义字符:

实例

const multiLineText = `

 This is

 a multi-line

 text.

`;


尝试一下 »

若要转义模板字面量中的反引号(`),需在反引号之前加一个反斜杠(\)。

`\`` === "`"; // true

模板字面量用反引号(`)括起来,而不是双引号(")或单引号(')。

除了普通字符串外,模板字面量还可以包含占位符——一种由美元符号和大括号分隔的嵌入式表达式:${expression}

字符串和占位符被传递给一个函数(要么是默认函数,要么是自定义函数)。默认函数(当未提供自定义函数时)只执行字符串插值来替换占位符,然后将这些部分拼接到一个字符串中。

模板字符串中允许我们使用变量:

实例

const name = 'Runoob';const age = 30;const message = `My name is ${name} and I'm ${age} years old.`;


尝试一下 »

以上实例中,${name}${age} 是模板字符串的表达式部分,它们被包含在 ${} 内部,并在运行时求值。

模板字符串允许你在字符串中引用变量、执行函数调用和进行任意的JavaScript表达式。

模板字符串中允许我们使用表达式:

实例

let price = 10;

let VAT = 0.25;


let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;


尝试一下 »

模板字符串当作 HTML 模板使用:

实例

let header = "";

let tags = ["RUNOOB", "GOOGLE", "TAOBAO"];


let html = `<h2>${header}</h2><ul>`;

for (const x of tags) {

 html += `<li>${x}</li>`;

}


html += `</ul>`;


尝试一下 »

JavaScript 字符串

JavaScript 运算符

2 篇笔记 写笔记


  1.   Lzk_aliver
     291***403@qq.com
    218
    这个教程里,没有展示,调用函数的情况,我这里,写一个。

const name = 'John';

const age = 31;

const job = 'Web Developer';

const city = 'Beijing';


function hello(){

   return 'hello';

}


let str =`

Name:${name}

age:${age}

job:${job}

city:${city}

calc:${2+2}

function:${hello()}

sanmu: ${age >

30 ? 'over 30': 'under 30' }

`


console.log(str);

  1. Lzk_aliver
      Lzk_aliver
     291***403@qq.com
    11个月前 (10-28)

  2.   hown315
     zjd***@163.com
    20
    我也来写一个:

// 定义标签函数

function tagFunction(strings, ...values) {

   // strings是模板字符串中不包含变量部分的数组

   // values是插值中的所有变量

   return strings.reduce((accumulator, str, i) => {

       // 对插值变量进行处理

       const value = values[i];


       // 处理插值变量

       const processedValue = (typeof value === 'string')

           ? `[${value.toUpperCase()}]`

           : (typeof value === 'number')

               ? `[${value * 2}]`

               : '';


       return accumulator + str + processedValue;

   }, '');

}


// 使用标签函数

const xm = 'Fitten';

const ll = 5; 


const result = tagFunction`Hello, my name is ${xm} and I am ${ll} years old.`;

console.log(result); // 输出: Hello, my name is [FITTEN] and I am [10] years old.

  1. 在这个例子中,`tagFunction`被用来处理模板字符串并将变量部分中字符串变量转换为大写,将数字乘以2,同时加上方括号标记。
目录
相关文章
|
23天前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
44 1
|
2月前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
59 5
|
1月前
|
存储 JavaScript 前端开发
JavaScript 字符串(String) 对象
JavaScript 字符串(String) 对象
38 3
|
2月前
|
JavaScript 前端开发
javascript创建字符串
javascript创建字符串
|
2月前
|
JavaScript 前端开发
如何在JavaScript中替换字符串:一篇详细指南
如何在JavaScript中替换字符串:一篇详细指南
|
2月前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法
42 2
|
2月前
|
JavaScript 前端开发 C++
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
|
2月前
|
C++
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
|
2月前
|
存储 移动开发 JavaScript
用 JavaScript 操作字符串
用 JavaScript 操作字符串
|
2月前
|
JavaScript 前端开发 安全
JavaScript编程实现字符和字符串翻转
JavaScript编程实现字符和字符串翻转