js/javascript 操作字符串【全】(含常用的操作字符串的lodash)-阿里云开发者社区

js/javascript 操作字符串【全】(含常用的操作字符串的lodash)

2024-07-02 5

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： js/javascript 操作字符串【全】(含常用的操作字符串的lodash)

创建字符串 ""

let str = "字符串的内容"

特殊符号使用\进行转义

\" 表示 "
\' 表示 '
\n 表示换行
\r 表示回车

\t 表示制表符
\b 表示空格
\\ 表示\

还可以使用转义字符输入Unicode编码

console.log('\u2600')

网页中使用Unicode编码，格式如下：

&#编码;

Unicode编码采用的是16进制，但是，这里的编码需要使用10进制

<h1 style="font-size: 60px;">&#9860;</h1>

获取字符串的长度

str.length

获取字符串的存储长度

英文占一个字符位，其他字符占两个字符位

function getZFWlength(string) {
        var count = 0;
        for (var i = 0; i < string.length; i++) {
            //对每一位字符串进行判断，如果Unicode编码在0-127，计数器+1；否则+2
            if (string.charCodeAt(i) < 128 && string.charCodeAt(i) >= 0) {
                count++;
            } else {
                count += 2;
            }
        }
}

获取字符串的像素长度（显示宽度）

字符串的像素长度，即字符串在页面中的显示宽度，和页面css的 fontSize fontFamily有关。

计算思路：创建一个用span包裹的字符串标签，其 window.getComputedStyle的计算值 - offsetWidth 即字符串在页面中的显示宽度

若计算像素高度，原理相同，见注释部分

    // 获取字符串的像素宽度
    function getPXwidth(str, fontSize = "12px", fontFamily = "Microsoft YaHei") {
        var span = document.createElement("span");
        var result = {};
        result.width = span.offsetWidth;
        result.height = span.offsetHeight;
        span.style.visibility = "hidden";
        span.style.fontSize = fontSize;
        span.style.fontFamily = fontFamily;
        span.style.display = "inline-block";
        document.body.appendChild(span);
        if (typeof span.textContent != "undefined") {
            span.textContent = str;
        } else {
            span.innerText = str;
        }
        result.width = parseFloat(window.getComputedStyle(span).width) - result.width;
        // 字符串的显示高度
        // result.height = parseFloat(window.getComputedStyle(span).height) - result.height;
        return result.width;
    }

Unicode 编码转字符

let result1 = String.fromCharCode(72);  // H

获取字符在字符串中的下标

索引值 = str.indexOf(想要查询的字符，查询的起始位置);

indexOf() 从前向后查找
lastIndexOf()从后向前查找

若字符串含有目标字符，返回其第一次出现的下标；如果没有找到则返回 -1，可用于判断字符串是否包含目标字符。

获取指定位置字符 [] 或 charAt()

str[index]      //  如  str[0]
// 或
字符 = str.charAt(index);

字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。

遍历字符串

for(let char of string){
  console.log("字符："+char);
}

字符串拼接 +

    var name = 'smyhvae';
    var age = '26';
 
    console.log('name:'+name+',age:'+age);   //传统写法
 
    console.log(`name:${name},age:${age}`);  //ES6 写法

字符串重复 repeat

str.repeat(5) //abcabcabcabcabc

字符串截取

slice【推荐】

字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。

(2, 5) 截取时，包左不包右。
(2) 表示从指定的索引位置开始，截取到最后。
(-3) 表示从倒数第几个开始，截取到最后。
(1, -1) 表示从第2个截取到倒数第一个。

(5, 2) 表示前面的大，后面的小，返回值为空。

substring

字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。

substring()不能接受负值作为参数。如果传递了一个负值，则默认使用0。

substring()还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， substring(1, 0)截取的是第一个字符。

substr【不推荐】

ECMAscript 没有对 substr() 方法进行标准化，因此不建议使用它。

字符串 = str.substr(开始索引, 截取的长度);

(2,4)：从索引值为2的字符开始，截取4个字符。
(1)：从指定位置开始，截取到最后。
(-3)：从倒数第几个开始，剪到最后.
不包括前大后小的情况。

字符串拆分为数组 split

    var str = "qian, gu, yi, hao"; // 用逗号隔开的字符串
    var array = str.split(","); // 将字符串 str 拆分成数组，通过逗号来拆分
    console.log(array); // 打印结果是数组：["qian", " gu", " yi", " hao"]
 
    //split()方法：字符串变数组
    var str3 = "大地|许嵩|smyhvae";
 
    console.log(str3.split());   // 无参数，表示：把字符串作为一个元素添加到数组中。
    console.log(str3.split(""));  //参数为空字符串，则表示：分隔字符串中每一个字符，分别添加到数组中
    console.log(str3.split("|")); //参数为指定字符，表示：此字符将不会出现在数组的任意一个元素中

拆分字符串中的词为数组【需lodash】

_.words('fred, barney, & pebbles');
// => ['fred', 'barney', 'pebbles']
 
_.words('fred, barney, & pebbles', /[^, ]+/g);
// => ['fred', 'barney', '&', 'pebbles']

字符串替换 replace()

将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。

新的字符串 = str.replace(被替换的内容，新的内容);

    //replace()方法：替换
    var str2 = "Today is fine day,today is fine day !!!"
    console.log(str2);
    console.log(str2.replace("today","tomorrow"));  //只能替换第一个today
    console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today

去除字符串前后的空白 trim()

    //去除前后的空格，trim();
    var str1 = "   a   b   c   ";
    console.log(str1.trim());

去除字符串头部的空白【使用lodash】

_.trimStart('  abc  ');
// => 'abc  '
 
_.trimStart('-_-abc-_-', '_-');
// => 'abc-_-'

去除字符串尾部的空白【使用lodash】

_.trimEnd('  abc  ');
// => '  abc'
 
_.trimEnd('-_-abc-_-', '_-');
// => '-_-abc'

是否包含指定字符串 includes()

str.includes('a')

是否以指定字符串开头 startsWith ()

str.startsWith('d')

是否以指定字符串结尾 endsWith ()

str.endsWith('g')

字符串转为html

    var str = "你好";
 
    console.log(str.anchor())
    console.log(str.big())
    console.log(str.sub())
    console.log(str.sup())
    console.log(str.link("http://www.baidu.com"));
    console.log(str.bold())

<a name="undefined">你好</a>
<big>你好</big>
<sub>你好</sub>
<sup>你好</sup>
<a href="http://www.baidu.com">你好</a>

字符串填充

时间自动补0

var dt = new Date(dateStr)
var hh = dt.getHours().toString().padStart(2, '0')

使用lodash

https://www.lodashjs.com/docs/lodash.pad

_.pad('abc', 8);
// => '  abc   '
 
_.pad('abc', 8, '_-');
// => '_-abc_-_'
 
_.pad('abc', 3);
// => 'abc'

驼峰写法【需lodash】

_.camelCase('Foo Bar');
// => 'fooBar'
 
_.camelCase('--foo-bar--');
// => 'fooBar'
 
_.camelCase('__FOO_BAR__');
// => 'fooBar'

首字母大写【需lodash】

_.capitalize('FRED');
// => 'Fred'

全部大写

str.toUpperCase()

全部小写

str.toLowerCase()

以空格分开单词，并转换为小写【需lodash】

_.lowerCase('--Foo-Bar--');
// => 'foo bar'
 
_.lowerCase('fooBar');
// => 'foo bar'
 
_.lowerCase('__FOO_BAR__');
// => 'foo bar'

以空格分开单词，并转换为大写【需lodash】

_.upperCase('--foo-bar');
// => 'FOO BAR'
 
_.upperCase('fooBar');
// => 'FOO BAR'
 
_.upperCase('__foo_bar__');
// => 'FOO BAR'