ES6系列笔记-字符串方法和字符串模板
两个新方法
1：startsWith（判断开头）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
let str="wqfge"
//判断字符串是否是以w开头的，返回true则代表是的，返回false代表不是
console.log(str.startsWith('a'))
</script>
</html>
简单示例：判断网页链接开头的状态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
/* let str="wqfge"
//判断字符串是否是以w开头的，返回true则代表是的，返回false代表不是
console.log(str.startsWith('a')) */
let str='https://www.bilibili.com/video/av20327829?p=8'
if(str.startsWith('http://')){
alert('普通网址')
}
else if(str.startsWith('https://')){
alert('加密网址')
}
else if(str.startsWith('git://')){
alert('加密网址')
}
</script>
</html>2：endWith（判断结尾）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
let str="wqfge"
//判断字符串是否是以e结尾的，返回true则代表是的，返回false代表不是
console.log(str.endsWith('e'))
</script>
</html>打印结果
简单示例：判断文件的后缀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
//endWith
let str = '1.png';
if (str.endsWith('.txt')) {
alert("文本文件")
} else if (str.endsWith('.jpg')) {
alert("jpg")
} else if (str.endsWith('.png')) {
alert("png")
}
</script>
</html>字符串模板
美元符号+花括号作用就是将定义好的变量a塞进字符串里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
//反单引号,就是字符串模板
let q = 22;
let str = `a${q}s`; //美元符号+花括号作用就是将定义好的变量a塞进字符串里面
console.log(str)
</script>
</html>打印结果如下：
小案例对比： 一般拼接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
let title = "标题";
let content = "内容";
//一般拼接方法，不能折行
let str = '<div>\
<h1>' + title + '</h1>\
<p>' + content + '</p>\
</div>';
console.log(str)
</script>
</html>
字符串模板拼接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
let title = "标题";
let content = "内容";
//模板字符串
//反单引号,就是字符串模板
let str2 = `<div>
<h1>${title}</h1>
<p>${content}</p>
</div>`;
console.log(str2)
</script>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
