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特性!!!

目录
相关文章
|
4天前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
3天前
|
JavaScript 数据处理 索引
js字符串截取
js字符串截取
8 1
|
25天前
|
设计模式 JavaScript 前端开发
JS 代码变量和函数的正确写法
JS 代码变量和函数的正确写法
30 3
|
4天前
|
JavaScript 前端开发
JavaScript声明变量的几种方式
JavaScript声明变量的几种方式
9 0
|
4天前
|
JavaScript 前端开发
JavaScript中使用模板字符串拼接和使用字符串拼接有什么区别?
JavaScript中使用模板字符串拼接和使用字符串拼接有什么区别?
|
4天前
|
JavaScript 前端开发 vr&ar
如何在 JavaScript 中对字符串进行索引、拆分和操作
如何在 JavaScript 中对字符串进行索引、拆分和操作
11 0
|
4天前
|
JavaScript 前端开发
在js中正则表达式验证小时分钟,将输入的字符串转换为对应的小时和分钟
这篇文章介绍了如何在JavaScript中使用正则表达式来验证时间字符串的格式(小时和分钟),并提供了将时间字符串转换为JavaScript Date对象的示例代码及其测试结果。
|
1月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
121 0
|
1月前
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
20 0
|
1月前
|
JavaScript
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,

热门文章

最新文章