JS的字符串插值,变量长文本换行

简介: 作为一个PHPer,经常需要在html中写js jq来解析数据,形成列表、选项等等。 (谁让我们PHPer还要兼顾页面呢?? 又不会Vue,只能这样子讨讨生活。) 那么就经常遇到Html代码拼接,或者字符串拼接,可能是这样子的问题

苦逼的PHPer要写前端


作为一个PHPer,经常需要在html中写js jq来解析数据,形成列表、选项等等。 (谁让我们PHPer还要兼顾页面呢?? 又不会Vue,只能这样子讨讨生活。) 那么就经常遇到Html代码拼接,或者字符串拼接,可能是这样子的问题


let html = "";
for(...){
    html += "<li> " + data.name + "</li>";
}


这种还是简单的,只有一个li,如果是2层、3层的div嵌套,那么这里就会是一团糟糕 有没有优雅一点的写法呢,比如php中的


$text = <<<xml
    ....
    222
    $$$
>>>


字符串插值特性


一些语言提供了字符串插值,幸运的是,JavaScript 正是其中之一。


let name = 'siam';
let html  = `Siam博客是一个干净的博客
   作者: ${name}
   年龄: 21
`;
alert(html);

我们将会得到这样子的结果


1f66b1250f9c1ff3e1efffd17a4b37c5.png


可以看到,在字符串中,我们使用${}来使用变量。 这里也可以使用对象的属性 比如$(this.job)等等 非常的方便 优雅 是一个你必须知道的JS特性!!!

目录
相关文章
|
19天前
|
存储 JavaScript 前端开发
JS上传文件(base64字符串和二进制文件流)
这篇文章介绍了两种JavaScript文件上传的方法:使用FileReader对象将文件读取为base64字符串上传,以及使用FormData对象以二进制文件流的形式上传文件,包括如何处理文件选择、读取和上传的详细代码示例。
JS上传文件(base64字符串和二进制文件流)
|
5天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
14天前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
27 0
JavaScript基础知识-变量的声明提前
|
4天前
|
JavaScript 数据处理 索引
js字符串截取
js字符串截取
14 5
|
7天前
|
Web App开发 JavaScript 前端开发
JavaScript 模板字符串
JavaScript 模板字符串
12 3
|
8天前
|
存储 JavaScript 前端开发
JavaScript 字符串
JavaScript 字符串
13 2
|
20天前
|
JSON JavaScript 前端开发
JS对象和字符串的相互转换
JS对象和字符串的相互转换
20 4
|
25天前
|
JavaScript 前端开发
JS常用数据类型转换(数字型和字符串型之间转换)
JS常用数据类型转换(数字型和字符串型之间转换)
34 2
|
8天前
|
Web App开发 JavaScript 前端开发
JavaScript 模板字符串
JavaScript 模板字符串
10 0
|
16天前
|
存储 JavaScript 前端开发