脚本宝典收集整理的这篇文章主要介绍了

学习笔记: JS字符串

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

我们在js中操作字符串,往往是将它转换为数组,再操作,如:

split('').reverse().join('')

字符串的反转

图片描述

图片描述

MDN

js字符串常用的一些方法

判断一个字符串是否以某个字符串开头

  • str.indexOf(substr[, start]) => 返回 substr 在字符串 str 中首次出现的位置,从 start 位置开始查找,如果不存在,则返回 -1。

start可以是任意整数,默认值为 0。如果 start < 0 则查找整个字符串(如同传进了 0)。如果 start >= str.length,则该方法返回 -1,除非被查找的字符串是一个空字符串,此时返回 str.length

 var str = 'JavaScript';
    str.indexOf('av');   // 1
    str.indexOf('av',2); // -1
    str.indexOf('',11);  // 10
    str.indexOf('',8);   // 8

  • str.includes(substr[, start]) => ES6方法判断 substr 是否被包含在 str 中,如果是返回true,否则返回false

    var str = 'To be, or not to be, that is the question.';

     
     str.includes('To be');     // true
     str.includes('To be', 1);  // false
     str.includes('TO BE');     // false
    
  • str.startsWith(substr[, start]) => ES6方法判断 str 是否是以 substr “开头”的,如果是返回true,否则返回false
var str = "To be, or not to be, that is the question.";

str.startsWith("To be");         // true
str.startsWith("not to be");     // false
str.startsWith("not to be", 10); // true

toSting 和 valueOf

所有对象继承了这两个转换方法
toString: 返回一个反映这个对象的字符串
valueOf: 返回它相应的原始值

var arr = [1,2,3]
var obj = {
    a: 1,
    b: 2
}
console.log(arr.toString()) // => 1,2,3
console.log(obj.toString()) // => [object Object]
// 那我们修改一下它原型上的 toString 方法呢
Array.prototype.toString = function(){ return 123 }
Object.prototype.toString = function(){ return 456 }
console.log(arr.toString()) // => 123
console.log(obj.toString()) // => 456

// 我们看下其余类型转换出来的结果, 基本都是转换成了字符串
console.log((new Date).toString()) // => Mon Feb 05 2018 17:45:47 GMT+0800 (中国标准时间)
console.log(/d+/g.toString()) // => "/d+/g"
console.log((new RegExp('asdad', 'ig')).toString()) // => "/asdad/gi"
console.log(true.toString()) // => "true"
console.log(false.toString()) // => "false"
console.log(function(){console.log(1)}.toString()) // => "function (){console.log(1)}"
console.log(Math.random().toString()) // => "0.2609205380591437"

学习笔记: JS字符串-脚本宝典
图片描述

var arr = [1,2,3]
var obj = {
    a: 1,
    b: 2
}
console.log(arr.valueOf()) // => [1, 2, 3]
console.log(obj.valueOf()) // => {a: 1, b: 2}
// 证明valueOf返回的是自身的原始值
// 同样我们修改下 valueOf 方法

Array.prototype.valueOf = function(){ return 123 }
Object.prototype.valueOf = function(){ return 456 }
console.log(arr.valueOf()) // => 123
console.log(obj.valueOf()) // => 456

// valueOf转化出来的基本都是原始值,复杂数据类型Object返回都是本身,除了Date 返回的是时间戳
console.log((new Date).valueOf()) // => 1517824550394  //返回的并不是字符串的世界时间了,而是时间戳
console.log(/d+/g.valueOf()) // => 456  当我们不设置时valueOf时,正常返回的正则表式本身:/d+/g,只是我们设置了 Object.prototype.valueOf 所以返回的时:456
console.log(Math.valueOf()) // => 456 同上
console.log(function(){console.log(1)}.valueOf()) // => 456 同上 

toString 和 valueOf 实例

1.

var a = {
    toString: function() {
        console.log('你调用了a的toString函数')
        return 8
    }
}
console.log( ++a) 
// 你调用了a的toString函数 
// 9  
// 当你设置了 toString 方法, 没有设置 valueOf 方法时,会调用toString方法,无视valueOf方法

2.

var a = {
    num: 10,
    toString: function() {
        console.log('你调用了a的toString函数')
        return 8
    },
    valueOf: function() {
        console.log('你调用了a的valueOf函数')
        return this.num
    }
}
console.log( ++a) 
// 你调用了a的valueOf函数
// 11
// 而当你两者都设置了的时候,会优先取valueOf方法, 不会执行toString方法

字符串模板

es5

引入lodash库的_.template()

// Use the "interpolate" delimiter to create a compiled template.
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

es6

图片描述

驼峰化一个连字符连接的字符串

/**
 * Camelize a hyphen-delimited string.//驼峰化一个连字符连接的字符串
 */
var camelizeRE = /-(w)/g;
var camelize = cached(function (str) {
  return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ‘‘; })
});

/**
 * Capitalize a string.//对一个字符串首字母大写
 */
var capitalize = cached(function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)//把第一个字符串的首个字符大写,把除第一个字符的字符串返回与大写的首字符拼接
});

/**
 * Hyphenate a camelCase string.用字符号连接一个驼峰的字符串
 */
var hyphenateRE = /([^-])([A-Z])/g;
var hyphenate = cached(function (str) {
  return str
    .replace(hyphenateRE, ‘$1-$2‘)//$1为正则表达式匹配的第一个元素$2为第二个元素
    .replace(hyphenateRE, ‘$1-$2‘)
    .toLowerCase()//使之最小化
});
/**
 * Check if a string starts with $ or _
 */
function isReserved (str) {
  var c = (str + '').charCodeAt(0)
  return c === 0x24 || c === 0x5f
}

图片描述

string to array

图片描述

repeat

clipboard.png

clipboard.png

判断字符串是否以 $ 或 _ 开头

clipboard.png

clipboard.png

clipboard.png

参考

《JavaScript经典实例》
js 基础总结(常用的反转)
vue源码解析

总结

以上是脚本宝典为你收集整理的

学习笔记: JS字符串

全部内容,希望文章能够帮你解决

学习笔记: JS字符串

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过