ES字符串
ES字符串
用户9184480
发布于 2024-12-07 16:39:04
发布于 2024-12-07 16:39:04
代码可运行
运行总次数：0
代码可运行
第四讲 字符串
js包含两种定义字符串的方式：'',"",``反引号的格式定义字符串，模板字符串。
4.1 模板字符串
4.1.1 为什么要使用模板字符串
let name='张晨光';
// let level=99;
// let str='教师名：'+name+'，游戏级别'+level;
// console.log(str);拼接麻烦
4.1.2概念
按照一定格式，进行填写内容设置的字符串，ES6模板。
银行：办理业务，汇款50万，填写单子；
上课：请假，请假10天，请假条；
小学：小学生 填空题；
1.类型判断，``：string
let str=`今年最牛的明星来了，在直播!!!`;
console.log(typeof (str)); //string2.可以直接使用换行符;
let content=`<ul>
<li>贾玲</li>
<li>周冬雨</li></ul>`;4.1.3 使用
光说不练，等于白干，来干一票。
//1.old 使用
let name='张晨光';
let level=99;
let str='教师名：'+name+'，游戏级别'+level;
console.log(str);
//问题，如果变量非常多，长；拼接字符串，麻烦;
//2.1定义模板字符串
let str=`今年最牛的明星来了，在直播!!!`;
console.log(typeof (str)); //string
//2.2直接使用换行符
let content='<ul><li>贾玲</li><li>周冬雨</li></ul>';
let content=`<ul>
<li>贾玲</li>
<li>周冬雨</li></ul>`;
//3.1 变量拼接
let name='张晨光';
let level=99;
let str=`最喜欢的老师：${name},级别是：${level}`;
console.log(str);
//3.2嵌入js运算符;
let num1=250;
let num2=666;
let result=`${num1}+${num2}=${num1+num2}`;
console.log(result);
//3.3嵌入对象,对象属性;
let teacher={name:'赵丽颖',salary:1800};
let str=`姓名:${teacher.name},基本工资:${teacher.salary}`;
console.log(str);
//3.4 调用函数
function sayHello() {
return "你好，美女！我是帅锅!!";
}
let str=`测试一把！${sayHello()}`;
console.log(str);4.1.4 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let db=[{title:'中国足球又输了',clicks:2500,author:'焦太筹'},
{title:'老张说IT',clicks:25000,author:'张晨光'},
{title:'贵圈真乱',clicks:2500,author:'刘小姐'},
{title:'上阳赋',clicks:2500,author:'无名'}];
//下面使用循环，加载数据到下面的ul无序列表；
window.onload=function () {
let ul=document.querySelector("#news");//读取到这个ul对象
for(let i=0;i<db.length;i++){
let li=document.createElement('li');
// li.innerHTML='<span>标题：'+db[i].title+'</span>\n' +
// ' <span>点击数：'+db[i].clicks+'</span>\n' +
// ' <span>作者：'+db[i].author+'</span>';
li.innerHTML=`<span>标题：${db[i].title}</span>
<span>点击数：${db[i].clicks}</span>
<span>作者：${db[i].author}</span>`;
//加载到ul里面;
ul.appendChild(li);
}
}
</script>
</head>
<body>
<!--设计页面;是不是这些放在数据库，模拟实现；从数据库读取数据;-->
<ul id="news">
<!-- 下面的li span都可以通过循环搞定;
<li>
<span>标题：中国足球又输了</span>
<span>点击数：2500</span>
<span>作者：焦太筹</span>
</li>
<li>
<span>标题：老张说IT</span>
<span>点击数：25000</span>
<span>作者：张晨光</span>
</li>
<li>
<span>标题：贵圈真乱</span>
<span>点击数：25040</span>
<span>作者：黎小姐</span>
</li>
<li>
<span>标题：上阳赋</span>
<span>点击数：2500</span>
<span>作者：无名</span>
</li>-->
</ul>
</body>
</html>4.2 扩展方法
4.2.1 indexOf()
判断字符串是否包含在另外一个字符串中，如果存在则返回字符串位置，不存在则返回-1.
let str="蔡徐坤爱打篮球，和张老师进行PK篮球";
console.log(str.indexOf('篮球'));
console.log(str.indexOf('游戏'));4.2.2 includes()
//2.includes() true/false,浏览器信息;可以用来收集用户信息；大数据分析做准备；
console.log(navigator.userAgent);
if(navigator.userAgent.includes('Chrome'))
alert('当前浏览器是谷歌浏览器');
else if(navigator.userAgent.includes('Firefox'))
alert('当前浏览器是火狐浏览器');
else
alert('其他浏览器');4.2.3 startsWith()、endsWith()
以xxx开头，以xxx结尾判断;判断开头;http协议，https协议，ftp协议等等;
let url='http://www.taobao.com/';
if(url.startsWith('https')){
console.log('您的网站采用的是安全协议https,挺好!!!')
}else if(url.startsWith('http')){
console.log('您的网站采用的是http协议');
}else{
console.log('您的网站采用的是其他协议');
}
let file='myphoto.xpg'; //文件扩展名
if(file.endsWith('jpg')||file.endsWith('png')){
alert('您可以上传图片');
}else
alert('文件格式不正确，必须是jpg或png格式');4.2.4 repeat()
重复方法，返回一个字符串，表示将原来的字符串重复了N次。
做点赞或一些设计，直接重复N次。
let str="小姐姐杀到!";
console.log(str.repeat(3));
console.log(str.repeat(0));
console.log(str.repeat(-1));4.2.5 padStart()和padEnd()
字符串补全功能。
格式：
str.padStart(填充后整个字符串的长度，填充内容) 往前填充
str.padEnd(填充后整个字符串的长度，填充内容)往后填充
备注：当前是str字符串，填充字符串是padStr
str.padStart(str.length+padStr.length,padStr)
let str='帅哥';
let padStr='喜欢';
console.log(str.padStart(8,padStr));
//应用场景;处理时间格式;const second=str>10?str:`0${str}`;
//const second=str.padStart(2,'0');
//针对数字字符串进行补全;
console.log('1'.padStart(10,'0'));
console.log('12'.padStart(10,'0'));
console.log('123456'.padStart(10,'0'));
//扩展一下;
console.log('12'.padStart(10,'YYYY-MM-DD'));
console.log('09-12'.padStart(10,'YYYY-MM-DD'));
//padEnd后置填充,时间戳，后端返回的数据秒，我们需要毫秒；秒-->毫秒;
let timestamp=1234512345;
timestamp=String(timestamp).padEnd(13,'0');
console.log(timestamp);4.2.6 trimStart()和trimEnd()
let str=' 英雄联盟牛掰任务排行榜';
console.log(str.length);
//ES2019新增了2个方法trimStart() trimEnd()，去除前面和后面空格；trim();
//trimLeft(trimStart别名) trimRight(trimEnd()别名）
console.log(str.trim().length); //输出str.trim()
//let str2=str.trim();
console.log(str.length); //输出str长度;
console.log(str.trimStart().length);
//返回的都是新的字符串，不会修改原来的字符串。本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
