js 的对象之字符串对象

javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。

1.对象Object

创建对象

var 对象名称=new Object();

设置对象属性

对象名称.属性名=值;

设置对象方法

对象名称.方法名=function(){ }

调用对象属性

 对象名称.属性名

调用对象方法

对象名称.方法名()

2字符串 String

创建String对象

var strOb = new String("abcefg");

var strOb = String("abcefg");

var strOb = "abcefg";

属性 length 长度(字符串长度)

字符串是个为数组可以将其中的值进行遍历

var str = 'hello';
console.log(str.length) // 5

方法

子字符串位置 indexOf(string,[index]) //返回子字符串abc在字符串中第一次出现的位置（从0开始计算），不存在返回-1 string ：查找的字符串的内容，必填项 index：开始查找位置，可有可无返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果被查找的内容不存在，则返回-1

lastIndexOf(string,[index]) //返回子字符串abc在字符串中最后一次出现的位置 string ：子字符串，查找的字符串的内容，必填项 index：开始查找位置，可有可无返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果被查找的内容不存在，则返回-1

// 封装函数 - 查找子字符串出现的次数
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+'次');

1.slice(start,end) 获取字符串的某个部分截取是前包含，后不包含 start 表示开始位置，从0开始到正无穷 end 表示结束位置，可以为正值，也可以为负值

// 基础使用
var str = 'hello wolrd';
console.log(str.slice(3,5));
console.log(str.slice(3,-1));

// 案例：使用slice和定时器，实现内容的输出
var str = '我的名字叫张三，我今年十三岁了';
var oBox = document.querySelector('#box');
var i = 0;
function show(){
    if(i<str.length){
        oBox.innerHTML += str.slice(i,++i); // 方法一
        oBox.innerHTML += str.charAt(i++); // 方法二
        setTimeout(show,100);
    }
}
show();

2.截取 substr(起始位置,[截取长度]) //截取不写则代表截取到字符串未尾起始位置：可以自定义，从0开始截取长度：可以是一个数字，还可以不写；如果不写长度，表示截取到字符串的末尾返回值：截取出来的字符串 substring(起始位置,[结束位置]) //不包括截取结果的右边界字符起始位置：是一个下标值，不能为负值结束位置：是一个下标值，不能为负值（不包括截取结果的右边界字符）

// 需求：判断图片是什么类型； 照片的格式必须是 png/jpg txt
// 获取文件名的后缀 - 后缀名开始的下标 - lastIndexOf / substr
function getSuffix(){
   var file = document.getElementById('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('格式不正确！');
    }
}

1.替换 replace('子字符串1','子字符串2') //将字符串中子字符串1替换为子字符串2,

2.在替换的时候要注意有些字符是需要加转移字符\，不然会把它认为成其他字符。例如“ *”在替换的时候要注意有些字符是需要加转移字符\，不然会把它认为成其他字符。例如“ *”

var str='My name is apple. So I like to eat apple very much!';
// 1. 普通替换
alert(str.replace('apple','banana'));
alert(str.replace(/apple/g,'banana'));

// 2. 将所有的数字替换为 空格
var str2 = '张三1李四2王五3马六';
alert(str2.replace(/[0-9]/g,' '));

// 3. 将所有的小写字母替换为空格
var str2 = '张三w李四f王五n马六';
var newStr2 = str2.replace(/[a-zA-Z]/g,' '); 
console.log(newStr2);

//  4. 将所有的字母 替换为 空格【不区分大小写】
var str2 = '张三w李四F王五n马六';
// var newStr2 = str2.replace(/[a-zA-Z]/g,' '); 
var newStr2 = str2.replace(/[a-z]/gi,' '); 
console.log(newStr2);

3获取指定位置的字符 charAt(n) 默认为第一个字符 n 表示的是下标，范围是 0-正无穷，不能使用负值

4获取指定字符的ASCII编码 str.charCodeAt()

var str1 = 'helloworld';
var getStr1 = str1.charCodeAt(2);
console.log(getStr1);

var num = 97;
console.log(String.fromCharCode(num)) // a

转换大小写 toLowerCase() toUpperCase()

<!-- 登录验证码效果 -->
<input type="text" id='inp'><span>tR4wC</span><br/>
<button id='btn'>按钮</button>
<script>
    // 模拟验证码的规则
    // 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.innerText.toUpperCase();
        if(inp == yanzheng){
            console.log('验证成功');
        }else{
            console.log('验证失败');
        }
    }
</script>

将字符串分割为数组 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() 下标标签

var oFont = document.getElementById('font');
var val = oFont.innerText;
oFont.innerHTML = val.big().fontcolor('red').strike().fontsize(18);
// oFont.innerHTML = val.sub()
console.log(val.sub());

设为超链接 link(url)

var oBox = document.querySelector('#box');
oBox.innerHTML = str.strike().fontsize(7).fontcolor('red').italics().link('http://www.baidu.com');

str.strike().fontsize(7).fontcolor('red').italics().link('http://www.baidu.com');

案例

如何判断一个文件是否是图片（截取图片文件的后缀名）

function getFileExtension2(filename) {
    return filename.split('.').pop();
}

面试题：编写一个函数，按下面的输入内容和输出接结果编写

function strChange(title){
  // 此次编写代码
}
var resultStr = strChange("Hello*Books*world*hello");
console.log(resultStr ) // 返回 “hello-books-world-world”

将字符串中所有的f换成F，并将字符串转成数组

扩展：创建一个按钮，点击上传图片，判断上传的文件是否是一张图片

将一大串数字转为xxx,xxx,xxx这种有间隔的方法【难】

function numberFormate(num) { // 数字格式化为x,xxx,xxx,xxx
    // 1. 将num专为数字类型
    num = parseFloat(num);
    // 2. 判断是否是一个数字
    if (!Number.isNaN(num)) {
        // 3. 将数字按照.进行分割（主要是针对浮点数）
        let str = Math.abs(num).toString().split('.');
        // 4. 整数部分按照3个一组，看可以分为几组
        const a = Math.ceil(str[0].length / 3);
        // 5. 不够3个一组的，自动补充0
        str[0] = str[0].padStart(a * 3, '0');
        const numArr = [];
        // 6. 将数字按照3个一组进行截取
        for (let i = 0; i < a; i++) {
            numArr.push(str[0].substring(i * 3, (i + 1) * 3));
        }
        // console.log(numArr);
        // 7. 将数组中的第一个值中前面补充的0去除
        numArr[0] = parseInt(numArr[0]);
        // 8. 将数组中的数字按照逗号进行拼接，并且拼接上小数点后面的值
        const formateStr = numArr.join(',') + (str[1] ? '.' + str[1] : '');
        // 9. 判断初始值是正值还是负值，需不需要添加-
        return num < 0 ? "-" + formateStr : formateStr;
    } else {
        throw new TypeError("传入的参数必须是数字");
    }
}
console.log(numberFormate(1123456789.2234)); // 结果为1,123,456,789.2234

posted @ 2023-11-18 11:33 刘先生的爱心博客阅读(149) 评论(0) 收藏举报

刷新页面返回顶部

js 的对象之 字符串对象

创建String对象

js 的对象之字符串对象