今天发现个问题，刚进入页面时显示工作地址为NAN，数据加载请求结束并渲染显示完成后是正常的。其中地址address是由请求到的对象jobInfo的prov_name、city_name、addres拼接起来的。
下面为代码部分：
<view class="white-bgView" style="margin-bottom: {{(jobInfo.enroll_list.length == 0 && !jobInfo.phone) ? '134rpx' : '0'}};">
<view class="title">
<image class="icon" src="/image/dress@3x.png"></image>
<view>工作地址</view>
</view>
<view class="line"></view>
<view class='map' catchtap='toMap'>
<view class="address">
{{jobInfo.prov_name+jobInfo.city_name+jobInfo.address}}
</view>
<image class='arrow-right' src='/image/arrow.png'></image>
</view>
</view>
我做了以下尝试：
<!-- 1、不作拼接，{{}}只绑定prov_name -->
<view class="address">
{{jobInfo.prov_name}}
</view>
<!-- 2、不作拼接，{{}}分别绑定prov_name、city_name、address -->
<view class="address">
{{jobInfo.prov_name}}{{jobInfo.city_name}}{{jobInfo.address}}
</view>
刚进页面时并不会显示NAN。
猜想应该是“+”拼接导致的问题，回到官方文档检查，运算符 中有说到加法运算（+）也可以用作字符串的拼接。从这一点来看的话，我在绑定内容中用+拼接字符串做显示应该没问题。那出现NAN是为什么呢？
NAN： Not A Number的简称，意思如单词描述一样，不是一个数值。
我给 class=“address” 的元素绑定内容，确实也不是数值运算，只是做简单的字符串拼接，也没问题呀，那为什么还会显示NAN呢？
搞不懂，还是会官方文档看数据绑定 的介绍。
算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
字符串运算
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
从例子中发现，绑定内容如果需要使用“+”运算符，要么发挥算数运算功能，要么做字符拼接。而从下面代码看
<view class="address">
{{jobInfo.prov_name+jobInfo.city_name+jobInfo.address}}
</view>
我在使用时从理解层面也是没有差错的，那究竟错在哪？
我的猜测和理解是：jobInfo.prov_name jobInfo.city_name jobInfo.address 数据未被请求时，jobInfo对象是不存在的。而jobInfo的这些属性类型也是不确定的，此时做“+”时，不会被当成字符串拼接作用在使用，而作为加法运算符的话，prov_name不是数字，所以才报NAN。
当然解决这个问题的方法有很多种，如：
1、wxml分别绑定拼接
<view class="address">
{{jobInfo.prov_name}}{{jobInfo.city_name}}{{jobInfo.address}}
</view>
2、js处理数据后直接给wxml绑定使用
// 设置一个变量localAddress直接在请求数据后
this.setData({
localAddress: jobInfo.prov_name+jobInfo.city_name+jobInfo.address
})
// 然后wxml中class=“address”的元素绑定内容为localAddress
<view class="address">
{{localAddress}}
</view>
3、wx:if 懒加载
<view wx:if="{{jobInfo.prov_name && jobInfo.city_name && jobInfo.address}}" class="white-bgView" style="margin-bottom: {{(jobInfo.enroll_list.length == 0 && !jobInfo.phone) ? '134rpx' : '0'}};">
<view class="title">
<image class="icon" src="/image/dress@3x.png"></image>
<view>工作地址</view>
</view>
<view class="line"></view>
<view class='map' catchtap='toMap'>
<view class="address">
{{jobInfo.prov_name+jobInfo.city_name+jobInfo.address}}
</view>
<image class='arrow-right' src='/image/arrow.png'></image>
</view>
</view>
第三种方案其实是隐藏了这个问题，wx:if是延迟加载的，在渲染条件为真时，才会真正渲染，网络请求结束后jobInfo对象存在，作为要显示地址的几个属性存在且为字符串，此时“+”做拼接是肯定不会报错。
这个虽然看似逻辑毫无问题却让自己懵逼的问题，让我再次感受了：发现问题 --> 分析&解决问题 这个过程，思考、学习和积累的重要性。
总结：
1、“+”：加法运算 & 字符拼接
2、{{}} 中使用 “+” 做算数运算需保证拼接内容为数字，做字符拼接需保证拼接内容为字符串
