【Es6入门实践】05使用live-server插件启动服务，使用字符串模板

前言：关于live-server的介绍

live-server插件实现了：
修改文件浏览器自动刷新；浏览器自动打开项目；本地开发搭建临时的服务。

• 本地开发常常需要搭建临时的服务，第一时间我们会想到用http-server。
• 但现在流行修改文件浏览器自动刷新hot socketing（热拔插），如live-reload。
• 若想浏览器自动打开项目，用opener。
• 现在live-server实现了三个插件的所有功能，并且很简单就能启动一个看起来很专业的本地服务
• 一款npm工具，全局npm i -g live-server后，项目目录使用live-server命令行命令便可直接在浏览器中预览（默认找index.html，其他请自行带上文件名空格后跟在后面），并且自动全局监听实时更新。

参考链接1：https://blog.csdn.net/shan1991fei/article/details/79007953
参考链接2：https://blog.csdn.net/qq_36770063/article/details/81128851
参考链接3：https://www.jianshu.com/p/a162131e22d0

正文：从使用live-server作为前端服务器来开发开始

1.新建文件夹

2.在终端npm init进行初始化

npm init

在过程中，名字可以自己手动输入一个，其他的可以选择默认

成功之后文件夹会生成package.json文件

我们可以在终端输入如下命令进行安装

npm install -g live-server

3.在文件夹里面新建index.html文件

在文件里面引入相对路径

  <script src="./index.js"></script>

4.新建index.js文件

在此文件进行要es6的代码测试

扫描二维码关注公众号，回复： 9955402 查看本文章

5.在终端输入live-server就可以在浏览器看见效果啦

接下来，我们的操作在保存之后，就会自动在浏览器显示了，减少了之前编译的繁琐步骤。

完整结果目录如下：

除了终端，也可以使用其他工具运行

比如我使用了Cmder

安装成功之后的显示

运行成功之后的显示

开始我们的模板字符串实践

01 字符串拼接

let hls="百事可乐"
let blog=`你是我的${hls}`
document.write(blog)

浏览器显示结果

这种语法支持空格，标签和运算

let hls="百事可乐"
let jack="小可爱"
let blog=`你是我的${hls}
我是你的${jack}`
document.write(blog)

let hls="百事可乐"
let jack="小可爱"
let blog=`你是我的${hls}<br>
我是你的${jack}`
document.write(blog)

let hls="百事可乐"
let jack="小可爱"
let blog=`你是我的${hls+jack}`
document.write(blog)

02字符串查找

let hls="百事可乐小可爱，超级无敌美少女"

document.write(hls.indexOf("小"))

浏览器显示结果：

说明了“小”这个字在我们要查找的数据里面的第四个（从0开始数）

我们可以使用判断，来判断这个字是否存在

let hls="百事可乐小可爱，超级无敌美少女"

document.write(hls.indexOf("小")>0)

浏览器显示结果：

说明这个字存在，所以返回true

我们这个要判断，比较麻烦，我们可以对代码做进一步的改进

let hls="百事可乐小可爱，超级无敌美少女"

document.write(hls.includes("小"))

我们发现结果还是一样的，直接用includes，就不用判断啦

02查找字符串

• 查找开头的字符串

let hls="百事可乐小可爱，超级无敌美少女"

document.write(hls.startsWith("百事可乐"))

• 查找结尾的字符串

let hls="百事可乐小可爱，超级无敌美少女"

document.write(hls.endsWith("美少女"))

03复制字符串：repeat

document.write('hls | '.repeat(1))
document.write('<br>')
document.write('learn | '.repeat(2))
document.write('<br>')
document.write('eat+drank | '.repeat(3))
document.write('<br>')
document.write('play+sing | '.repeat(4))

浏览器显示结果

复制字符串主要用于排版某个符号，平时要多动手，运用于实践中

纸上得来终觉浅，还是要多动手实践哦~~~~