JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例
1.1-web前端 基础标签 、图片、超链接2.2-web前端 音频、视频、表格、表单3.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动4.5-web前端 定位position5.6-web前端的特效 平面转换transfrom6.7-web前端 空间转换，3D效果7.8-web前端 动画 案例8.9-web前端 flex弹性布局9.10-JavaScript 点击事件 随机点名器10.11-JavaScript 逻辑条件 ，if判断 ，while循环，算数运算相关的案例演示11.12-web前端轮播图案例 （小米商城）12.css字体样式13.css样式对单行和多行文本的隐藏14.css伪类和伪元素15.web前端html+css页面内容的六种隐藏方式16.JavaScript的基础语法和数据类型17.JavaScript 数组Array存储方式及对象Object18.JavaScript数据类型的转换19.JavaScript运算符及优先级20.JavaScript条件判断if 语句21.JavaScript for循环控制语句22.JavaScript 其他循环语句和跳转语句23.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析24.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例25.JavaScript Array对象（属性、方法） 留言板案例
26.JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例
27.JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历28.JavaScript事件 29.JavaScript BOM对象一、创建string对象
var strOb = String("abcefg");
var strOb = "abcefg";
二、属性
length (字符串长度)
var str = 'hello';
console.log(str.length) // 5三、方法
1、子字符串位置
[index])
index：开始查找位置，可有可无
返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果被查找的内容不存在，则返回-1
var str = 'hello';
console.log(str.indexOf('o'));
[index])
console.log(str.lastIndexOf('o',4));返回子字符串abc在字符串中最后一次出现的位置
案例：查找 afgdtywgbfnjekagrn 字符串中有多少次 g
var str = new String('afgdtywgbfnjekagrn');
var index = str.indexOf('g'); // 2
// 统计次数
var num = 0;
while(index !== -1){ // 查找
num++;
index = str.indexOf('g',index + 1);
}
console.log('g一共出现了'+num+'次');// 封装函数 - 查找子字符串出现的次数
function counts(str,cStr){
var index = str.indexOf(cStr);
var num = 0; // 出现的次数
while(index != -1){
num++; // 每出现一次，次数+1
index = str.indexOf(cStr,index+1);
}
return num;
}
var n = counts('38qhdahwdqjk24hjoiyowuierfy8','o');
alert('O一共出现了'+n+'次');2、slice(start,end) 获取字符串的某个部分
start 表示开始位置，从0开始到正无穷
end 表示结束位置，可以为正值，也可以为负值
var str = 'hello wolrd';
console.log(str.slice(5,11));
console.log(str.slice(0,-5));案例：使用slice和定时器，实现内容的输出
var str = '我的名字叫张三，我今年十三岁了,遗的么到蒲子极为言舟失舟天于国，汪善欲对一和德整终国不是，公哉秦不孔啦吞我丈可畴弟是之他夹，厄与活。';
var oBox = document.querySelector('#box');
var i = 0;
function show(){
if(i<str.length){
oBox.innerHTML = str.substr(0,i++) //方法三
// oBox.innerHTML += str.slice(i,++i); // 方法一
//oBox.innerHTML += str.charAt(i++); // 方法二
setTimeout(show,100);
}
}
show();3、截取
substr(起始位置，截取长度)
substring和splice效果方法一致
var str = 'hello wolrd';
console.log(str.substr(0,str.length));案例：判断图片是什么类型； 照片的格式必须是 png/jpg txt
获取文件名的后缀 - 后缀名开始的下标 - lastIndexOf / substr
<div id="box"></div>
<input type="file" name="" id="files">
<button onclick="getSuffix()">提交</button> function getSuffix(){
var file = document.querySelector('#files');
var pic = file.value;// 图片的路径
// var pic = '.././images/banner/one.txt';
var suffix = pic.substr(pic.lastIndexOf('.')+1);
if(suffix=='png'||suffix=='pneg'||suffix=='jpg'||suffix=='jpeg'){
alert('图片格式正确');
}else{
alert('格式不正确！');
}
}四、替换 replace()
var str='My name is apple. So I like to eat apple very much!';
//单个替换
console.log(str.replace('apple','banner'));
//全部替换
console.log(str.replace(/apple/g,'banner'));/apple/g 正则表达式，意为全局
// 将所有的数字替换为 空格
// var str2 = '张三1李四2王五3马六';
console.log(str2.replace(/[0-9]/g,' '));
// 将所有的小写字母替换为空格
// var str2 = '张三w李四f王五n马六';
console.log(str2.replace(/[a-z]/g,' '));
// 将所有的字母 替换为 空格【不区分大小写】
// var str2 = '张三w李四F王五n马六';
console.log(str2.replace(/[a-zA-Z]/g ,' '));
console.log(str2.replace(/[a-z]/ig , ' '));五、获取指定位置的字符
charAt(n) 默认为第一个字符n 表示的是下标，范围是 0-正无穷，不能使用负值
var str1 = 'helloworld';
console.log(str1.charAt(5));
//获取指定字符的ASCII编码 str.charCodeAt()
console.log(str1.charCodeAt(0));
var num = 97
console.log(String.fromCharCode(num))
六、转换大小写toLowerCase() toUpperCase()
案例：验证码登录
<input type="text " id="inp"><span>tR4wC</span>
<button id="btn">提交</button> //1.找到按钮
var oBtn = document.querySelector('#btn');
//3.获取input里面内容
var oInp = document.querySelector('#inp');
//4.获取span里面的内容
var oSpan = document.querySelector('span');
//2.添加点击事件
oBtn.onclick = function(){
//5.将input框里面的值转为大写
var inp = oInp.value.toUpperCase();
//6.将span框里面的值转为大写
var yanzheng = oSpan.innerHTML.toUpperCase();
if(inp==yanzheng){
alert('验证成功');
}else{
alert('验证失败');
}
}
案例：输入字母自动转为大写
var oInp = document.querySelector('#inp');
oInp.onkeyup = function(){
inp.value = oInp.value.toUpperCase()
console.log(oInp.value.toUpperCase());
}七、将字符串分割为数组,split(分割符,\[返回数组的最大长度])
var str = 'I am student my name is jack';
console.log(str.split()); //将整个字符串分割为一个整体
// console.log(str.split(' ')); //按照空格进行分割
// console.log(str.split('')); //将字符串中的每个字符都进行分割
// var str1 = '张三*20211203*10';
// console.log(str1.split('*'));//按数字进行分组
var str1 = "jack1Rose2Box3Tom4Jerry";
console.log(str1.split(/[0-9]/));
var str1 = "张三t里斯r王五p马六";
console.log(str1.split(/[a-z]/));
八、 bold() 加粗 italics() 斜体 strike() 删除 fontcolor('#f00') 字符串颜色 fontsize(1-7) 字符串大小 sup() 上标标签 sub() 下标标签
//5.显示字符串效果
var str = 'hello world';
document.write(str.bold().fontcolor('#f00').italics().fontsize(7).link('https://www.baidu.com'));
九、获取图片后缀案例
function getimgname (filename){
return filename.split('.').pop();
}
console.log(getimgname('dhaiwdiw.efdwefd.fwfwe.png'));十、 输入和输出结果转换形式案例
var resultStr ="Hello*Books*world*hello";
function strChange (){
//1.将字符串按照*分割，分割成数组
var arr = resultStr.split('*')
//2.遍历所有首字母
for(var i=0;i<arr.length;i++){
//3.第一个字母转为小写，遍历出来的第一位，replace变换成刚才转为字母小写
// console.log(arr[i][0].toLowerCase());
//4.用转换好的内容替换原来的内容
var newArr = arr[i].replace(arr[i][0],arr[i][0].toLowerCase())
arr[i] = newArr;
}
//将数组使用join转换成想要的形式字符串
console.log(arr.join('-')) // 返回 “hello-books-world-world”
}
strChange(resultStr)
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！