前端备忘录

记录使用，留个印象

---

---

JS相关

---

---

字符串玩法

通配符

String.prototype.format=function()
{
  if(arguments.length==0) return this;
  for(var str = this, i=0; i< arguments.length; i++)
    str = str.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]);
  return str;
};

console.log("你好，我叫{0}，我是{1}".format("YH", "中国人"))

截取字符串的三种“姿势”

1. substr(start, length)
   参数含义：开始索引（不包含），截取长度。

   var str = "be all you can be!"
   console.log(str.substr(7,3))
   // 输出 "you"
   

   当不设置第二个参数时，则截取剩余部分。

   var str = "be all you can be!"
   console.log(str.substr(7))
   // 输出 "you can be!"
   

   当第一个参数为负数时，则从该字符串结尾计算索引。

   var str = "be all you can be!"
   console.log(str.substr(7))
   // 输出 "can be!"
   

2. substring(start, end)
   参数含义：开始索引（不包含），结束索引（包含）。

   var str = "be all you can be!"
   console.log(str.substring(7,10))
   // 输出 "you" 
   

   当省略第二个参数时，则截取开始索引后剩余部分。

   var str = "be all you can be!"
   console.log(str.substring(7))
   // 输出 "you can be!"
   

   当索引为负数时，按0处理。

   var str = "be all you can be!"
   console.log(str.substring(-7,10))
   // 输出 "be all you"
   

   当结束索引小于开始索引时，按照较小的值为开始索引，较大的值为结束索引。

   var str = "be all you can be!"
   console.log(str.substring(10,7))
   // 输出  "you" 
   

3. slice(start, end)
   使用方法与substring()类似，不同之处在于slice()接受负数。

   var str = "be all you can be!"
   console.log(str.slice(7,10))
   // 输出 "you" 
   

   当参数为负数时，则从字符串末尾开始计数。

   var str = "be all you can be!"
   console.log(str.slice(7,-8))
   // 输出 "you" 
   

indexOf() 与 search()都是搜索字符串并返回匹配的位置，它们的区别是什么？

search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法使用正则表达式。

toString() 玩法

总所周知，原始类型Boolean，Number，String都可以使用toString()方法，把它们的值转换成字符串。

Boolean类型 输出结果由变量决定且只有"true"和"false"两种。

console.log(true.toString())
// 输出 "true"

Number的toString()较特殊，分为默认模式与基模式。
默认模式：toString()直接输出相应的数值。

console.log(10.00.toString())
// 输出 "10"

基模式：该模式只是转换成基数的一种写法。
注：二进制的基是：2；
八进制的基是：8；
十进制的基是：10；（与默认模式相同）
十六进制的基是：16；

var num = 10.00;
console.log(num.toString(2))	//输出 "1010"
console.log(num.toString(8));	//输出 "12"
console.log(num.toString(10));	//输出 "10"
console.log(num.toString(16));	//输出 "a"

---

其他

调用本地应用

通过 href="mailto:"打开本地邮箱
通过 href="tel:"打开本地拨号

<a href="mailto:收件人邮箱?cc=抄送人邮箱&subject=标题&body=内容">****.@qq.com</a>
<a href="tel:123456">123456</a>

特殊的NaN

NaN表示非数（Not a Number）.,一般在类型转换失败时会发生，所以NaN不能用于计算。NaN特殊还有一个原因就是它与自身不等，也就是说下面代码会输出false。

console.log(NaN == NaN)
// 输出 "false"

因此，在判断时不推荐使用NaN值本身，使用isNaN()更好，如下：

console.log(isNaN("a"));  //输出 "true"
console.log(isNaN("666"));  //输出 "false"
console.log(isNaN(false));  //输出 "false"  false = 0

String 转 Number

var sNum = "20";
console.log(typeof sNum);	//输出 "string"
var iNum = +sNum;
console.log(typeof iNum);	//输出 "number"
console.log(`${+'0010'}`) // 输出 10

arguments会以数组的方式返回回调函数传递的数据

function argumentsLog () {
 console.log(arguments);
}

argumentsLog(1,'2');
// 输出 [1, "2"]

window.location

  console.log('设置或获取对象指定的文件名或路径: ', window.location.pathname);
  console.log('设置或获取整个 URL 为字符串: ', window.location.href);
  console.log('获取当前页面的域名: ', window.location.origi);
  console.log('设置或获取与 URL 关联的端口号码: ', window.location.port);
  console.log('设置或获取 URL 的协议部分: ', window.location.protocol);
  console.log('设置或获取 href 属性中在井号“#”后面的分段: ', window.location.hash);
  console.log('设置或获取 location 或 URL 的 hostname 和 port 号码: ', window.location.host);
  console.log('设置或获取 location 或 URL 的 hostname: ', window.location.hostname);
  console.log('设置或获取 href 属性中跟在问号后面的部分: ', window.location.search);
  console.log('属性 描述 hash 设置或获取 href 属性中在井号“#”后面的分段javascript判断字符串中是否包含某字符串: ', window.location);

---

---

css相关

---

滚动条样式

1、Firefox

  scrollbar-color: rebeccapurple red;
  scrollbar-width: thin;

2、Chrome

.class::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: hsla(0, 0%, 100%, 0.6);
}

.class::-webkit-scrollbar-track {
  border-radius: 0;
}

.class::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(95, 95, 95, 0.4);
  transition: all 0.2s;
  border-radius: 8px;
  &:hover {
    background-color: rgba(95, 95, 95, 0.7);
  }
}

---

文本过长添加省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

---

垂直水平居中

• absolute（已知宽高）

position: absolute;
top: 50%;
left: 50%;
width: 100em;
height: 80em;
margin-left: -50em;
margin-top: -40em;

• absolute（未知宽高）

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

• flex（未知宽高）

display: flex;
align-items: center;
justify-content: center;