创建字符串 ""
let str = "字符串的内容"
特殊符号使用\进行转义
- \" 表示 "
- \' 表示 '
- \n 表示换行
- \r 表示回车
- \t 表示制表符
- \b 表示空格
- \\ 表示\
还可以使用转义字符输入Unicode编码
console.log('\u2600')
网页中使用Unicode编码，格式如下：
&#编码;
Unicode编码采用的是16进制，但是，这里的编码需要使用10进制
<h1 style="font-size: 60px;">⚄</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'
