(小程序篇)7.lin-ui过滤器说明：在微信小程序中，wxml的数据绑定仅支持简单运算，例如：三元表达式、算数运算、逻

说明：在微信小程序中，wxml的数据绑定仅支持简单运算，例如：三元表达式、算数运算、逻辑判断、字符串运算；不支持复杂的计算，在lin-ui中提供了相关的计算过滤器。

一、导入使用

1.WXML使用

wxml引入

<wxs src="../../miniprogram_npm/lin-ui/filter/string.wxs" module="string" />

src必须填相对路径
module值用于调用过滤器的方法

2.WXS中使用

wxs引入

var string = require("../../miniprogram_npm/lin-ui/filter/string.wxs")

require是相对路径

二、基本使用-String字符

wxml导入：<wxs src="../../miniprogram_npm/lin-ui/filter/string.wxs" module="string"/>

1.toString

说明：toString()方法可把一个逻辑值转换为字符串，并返回结果
语法：string.toString(targetString)
测试代码：

wxml

<view>{{string.toString(name)}}</view>

js

page(
	data: {
      	name:['james', 'paul', 'melo']
  	}
)

2.valueOf

说明：valueOf()方法可返回 String 对象的原始值
语法：string.valueOf(targetString)

3.charAt

说明：charAt()方法可返回指定位置的字符
语法：string.charAt(targetString, index)
参数说明：index是索引
测试代码：

wxml

<view>{{string.charAt('wertyuiopasd', 2)}}</view>

结果：页面展示字母r

4.indexOf

说明：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
语法：string.indexOf(targetString,searchValue,fromIndex)
参数说明：

targetString：在该字符串中查找
searchValue：被查找的值，若找到该值，返回所在索引，若未找到该值，则返回-1；
fromIndex：开始查找的位置，可以是任意整数，默认值为0

测试代码：

wxml

<view>{{string.indexOf('wdnmdwdnmd', 'd', 0)}}</view>

结果：页面展示1

5.lastIndexOf

说明：lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
语法：string.lastIndexOf(targetString,searchValue,fromIndex)
参数说明：

targetString：在该字符串中查找
searchValue：被查找的值，返回该值最后出现的位置的索引，若未找到该值，则返回-1；
fromIndex：开始查找的位置，可以是任意整数，默认值为targetString.length

测试代码：

wxml

<view>{{string.lastIndexOf('wdnmdwdnmd', 'd', 0)}}</view>

结果：页面展示9

6.slice

说明：slice()方法提取一个字符串的一部分，并返回一个新的字符串
语法：string.slice(targetString,beginSlice,endSlice)
参数说明：

1.targetString：在该字符串中查找
2.beginSlice：从该索引（以0为基数）处开始提取原字符串中的字符。如果值为负数，会被当做sourceLength + beginSlice 看待，这里的sourceLength 是字符串的长度 (例如，如果beginSlice 是 -3 则看作是: sourceLength - 3);
3.endSlice：可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice会一直提取到字符串末尾。如果该参数为负数，则被看作是 sourceLength + endSlice，这里的 sourceLength 就是字符串的长度(例如，如果 endSlice 是 -3，则是, sourceLength - 3)。

测试代码
.wxml

{{string.slice('abcdefghijklmnopqrstuvwxyz', 1)}}

{{string.slice('abcdefghijklmnopqrstuvwxyz', 1, 3)}}

{{string.slice('abcdefghijklmnopqrstuvwxyz', -3, -1)}}

{{string.slice('abcdefghijklmnopqrstuvwxyz', -3)}}

{{string.slice('abcdefghijklmnopqrstuvwxyz', -1)}}

7.split

说明：使用指定的分隔符字符串将一个String对象分割成字符串数组，以将字符串分隔为子字符串，以确定每个拆分的位置。
语法：string.split(targetString,[separator[, limit]])
参数说明：

1.targetString：在该字符串中查找
2.separator：指定表示每个拆分应发生的点的字符串
3.limit：可选。一个整数，限定返回的分割片段数量

返回值：返回源字符串以分隔符出现位置分隔而成的一个Array
测试代码

wxml

<view>{{string.split('你好=我是=你们的=卧槽=一二三=我我我','=')}}</view>
<view>{{string.split('你好=我是=你们的=卧槽=一二三=我我我','=',3)}}</view>

8.substring

说明：substring() 返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。
语法：string.substring(targetString,indexStart[, indexEnd])
参数：

1.targetString：在该字符串中截取
2.indexStart：需要截取的第一个字符的索引，该字符作为返回的字符串的首字母
3.indexEnd：一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内

测试代码：

wxml

<view>{{string.substring('你好我今年五岁', 1, 3)}}</view>
<!-- 好我 -->
<view>{{string.substring('你好我今年五岁', 1)}}</view>
<!-- 好我今年五岁 -->

9.toLowerCase

说明：toLowerCase() 将目标字符串值转为小写形式
语法：string.toLowerCase(targetString)
测试代码：

wxml

<view>{{string.toLowerCase('NBA')}}</view>
<!-- nba -->

10.toUpperCase

说明：toUpperCase() 将目标字符串值转为大写形式
语法：string.toUpperCase(targetString)
测试代码：

wxml

<view>{{string.toUpperCase('china')}}</view>
<!-- CHINA -->

11.trim

说明：trim()从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）
语法：string.trim(targetString)
测试代码

wxml

<view>{{string.trim('   wodadongxi   ')}}</view>
<!-- wodadongxi -->

三、基本使用Array数组

wxml导入：<wxs src="../../miniprogram_npm/lin-ui/filter/string.wxs" module="string"/>

1.join

说明：join将数组通过连接符连接，并返回连接后的字符串
语法：array.join(targetArray,spearator)
参数：

targetArray：目标数组
spearator：可选，将数组转成字符串时的连接符

测试代码：

wxml

<view>{{array.join(name, '-')}}</view>
<!-- james-paul-melo -->
<view>{{array.join(name, '')}}</view>
<!-- jamespaulmelo -->

js

data: {
	name:['james', 'paul', 'melo']
}

2.pop

说明：pop移除数组的最后一个元素
语法：array.pop(targetArray)
返回值：

返回一个对象：
item移除的对象
newArray移除元素后的数组

测试代码：

wxml

<view wx:for="{{array.pop(list)['newArray']}}" wx:key="index">
  {{item.name}}  
</view>

js

data: {
  list:[{name: 'test1'},{name: 'test2'},{name: 'test3'},{name:'test4'}]
}

3.push

说明：在数组最后追加一个或多个元素，返回新的数组
语法：array.push(targetArray,element1[, ...[, elementN]])
参数：

targetArray：目标数组
element：要追加的元素

测试代码：

wxml

<view wx:for="{{array.push(name,'wade','yi')}}" wx:key="index">
  {{item}}  
</view>
<view wx:for="{{array.push(category, newCate, newCateMore)}}">
  {{item.name}}
</view>

js

data: {
  name:['james', 'paul', 'melo'],
  newCate:{name: '分类四'},
  newCateMore:{name: '分类五'},
  category:[
    {name: '分类一'},
    {name: '分类二'},
    {name: '分类三'}
  ]
}

4.reverse

说明：数组倒序
语法：array.reverse(targetArray)
测试代码：

wxml

<view wx:for="{{array.reverse(name)}}" wx:key="index">
  {{item}}
</view>

js

data: {
	name:['james', 'paul', 'melo']
}

5.shift

说明：移除数组的第一个元素
语法：array.shift(targetArray)
返回值：

返回一个对象：
item移除的对象
newArray移除元素后的数组

测试代码：

wxml

<view wx:for="{{array.shift(category)['newArray']}}" wx:key="index">
  {{item.name}}
</view>

js

data: {
  category:[
    {name: '分类一'},
    {name: '分类二'},
    {name: '分类三'},
    {name: '分类四'},
    {name: '分类五'}
  ]
}

6.slice

说明：可从已有的数组中返回选定的元素
语法：array.slice(targetArray[,beginSlice[, endSlice]])
参数：

1.targetArray目标数组
2.beginSlice从该索引（以 0 为基数）处开始提取目标数组中的元素
3.endSlice在该索引（以 0 为基数）处结束提取数组元素

测试代码：

wxml

<view wx:for="{{array.slice(category, 1, 3)}}" wx:key="index">
  {{item.name}}  
</view>
<!-- 分类二   分类三 -->

<view wx:for="{{array.slice(category, -3, -1)}}" wx:key="index">
  {{item.name}}  
</view>
<!-- 分类八   分类九 -->

js

data: {
  category:[
    {name: '分类一'},
    {name: '分类二'},
    {name: '分类三'},
    {name: '分类四'},
    {name: '分类五'},
    {name: '分类六'},
    {name: '分类七'},
    {name: '分类八'},
    {name: '分类九'},
    {name: '分类十'}
  ]
}

7.concat

说明：合并数组，返回一个新的数组
语法：array.concat(targetArray[,value1[, value2[, ...[, valueN]]]])
参数说明：

targetArray目标数组
valueN要合并的数组

测试代码：

wxml

<view wx:for="{{array.concat(oldArr,newArr)}}" wx:key="index">
  {{item}}  
</view>

js

data{
  oldArr:['old1', 'old2', 'old3'],
  newArr:['new1', 'new2', 'new3']
}

8.splice

说明：通过移除或替换数组存在的元素，或新增元素来改变数组内容
注：splice和slice相比，splice会修改原数组
语法：array.splice(targetArray,start[, deleteCount[, item1[, item2[, ...]]]])
参数：

1.targetArray目标数组
2.start开始改变数组的元素的索引，默认为0。如果大于数组的长度，实际的起始索引将设置为数组的长度。如果为负数，将从数组长度-start的位置开始，如果绝对值大于数组长度，则将其设置为0
3.deleteCount可选，从数组中移除元素的个数；
4.item可选，添加进数组的元素，从start 索引开始

测试代码：

wxml

<view wx:for="{{array.splice(cate, 1, 3)}}" wx:key="index">
  {{item.name}}  
</view>
<!-- cate1 cate5 -->

js

data: {
  cate:[
    {name:'cate1'},
    {name:'cate2'},
    {name:'cate3'},
    {name:'cate4'},
    {name:'cate5'},
  ]
}

9.unshift

说明：在数组开始加一个或多个元素，返回新的数组
语法：array.unshift(targetArray,element1[, ...[, elementN]])
参数：

targetArray目标数组
elementN要插入的元素

测试代码：

wxml

<view wx:for="{{array.unshift(name, 'jordan')}}" wx:key="index">
	{{item}}
</view>

js

data: {
  name: ['paul', 'wade', 'james', 'davis']
}

10.indexOf

说明：数组中该元素的索引（从前往后查找），元素区分大小写
语法：array.indexOf(targetArray)
参数：

1.targetArray目标数组
2.searchValue被查找的值，若找到该值，返回所在索引，若未找到该值，则返回-1；
3.fromIndex开始查找的位置，可以是任意整数，默认值为 0

测试代码：

wxml

<view>{{array.indexOf(name, 'wade')}}</view>
<!-- 1 -->

js

data: {
  name: ['paul', 'wade', 'james', 'davis']
}

11.lastIndexOf

说明：数组中该元素的索引（从后往前查找），元素区分大小写
语法：array.lastIndexOf(targetArray)
参数：

1.targetArray目标数组
2.searchValue被查找的值，返回该值最后出现的位置的索引，若未找到该值，则返回-1；
3.fromIndex开始查找的位置，可以是任意整数，默认值为 targetArray.length

测试代码：

wxml

<view>{{array.lastIndexOf(name, 'james')}}</view>
<!-- 3 -->

js

data: {
	name: ['paul', 'james', 'wade', 'james', 'davis']
}

四、Is判断

1.支持判断以下数据类型

isNumber
isString
isObject
isBoolean
isFunction
isDate
isArray
isRegExp

2.语法：

is.isNumber(val)

五、业务型

classnames

说明：classnames适用于wxml中，用于动态设置class的值。通过条件配置返回符合条件的字符串。

示例代码

classnames('foo', 'bar'); // => 'foo bar'
classnames('foo', { bar: true }); // => 'foo bar'
classnames({ foo: true }, { bar: true }); // => 'foo bar'
classnames({ 'foo-bar': false }); // => 报错
classnames({ foo: true, bar: true }); // => 'foo bar'
classnames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
classnames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

提示：

1.classnames运行环境在wxml中，在传入的是参数为对象时，key用''包含会报语法错误
2.在wxml中使用时，需要用{{}}包裹

测试代码

wxml

<wxs src="../../miniprogram_npm/lin-ui/filter/classnames.wxs" module="classnames" />
<view class="{{classnames('color-ff0000', 'bg-000000')}}">你好</view>

wxss

.color-ff0000{
  color: #FF0000;
}
.bg-000000{
  background: #000000;
}

效果展示

lin-ui过滤器页面跳转