js字符截取与字符拼接

昨天写标签的时候碰到的，用饿了么组件Tag的时候返回的是将数组变成由逗号拼接的字符串

<el-form-item label="" :label-width="formLabelWidth">
      <el-tag
        v-for="tag in dynamicTags"
        :key="tag"
        style="margin-right:10px"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <el-input
        v-if="inputVisible"
        ref="saveTagInput"
        v-model="mark"
        class="input-new-tag"
        size="small"
        :maxlength="20"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
        <template slot="prepend">
          <el-button tab-index="-1">标签</el-button>
        </template>
      </el-input>
      <el-button
        v-else
        class="button-new-tag"
        size="small"
        @click="showInput"
      >+ 图标标签</el-button>
    </el-form-item>

 dynamicTags: [],
      inputVisible: false,
      mark: '',
      marks: ''

 methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const mark = this.mark
      if (mark) {
        this.dynamicTags.push(mark)
      }
      this.inputVisible = false
      this.mark = ''
    },
.................................

submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.dynamicTags.length <= 0) {
            this.$message.error('请添加图标标签后提交')
            return
          }
          this.marks = this.dynamicTags.join(',')

          this.form.marks = this.marks
          this.$request
            .postJSON('goods/iconStoreClouds/save', this.form)
            .then(res => {
              this.loading = false
              if (res.success) {
                this.$message({
                  showClose: true,
                  message: res.message,
                  type: 'success'
                })
                this.clearModel()
              } else {
                this.$message.error(res.message)
              }
            })
            .catch(res => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    }

将数组dynamicTags[]用逗号拼接的时候生成了一个字符串marks用的是这句代码

this.marks = this.dynamicTags.join(',')

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

而在页面回显的时候，要将marks重新变为数组则需要如下处理：

 

// 编辑图标信息
    editImg(id) {
      this.editImgId = id;
      this.$request
        .get("goods/iconStoreClouds/" + id + "/update", {})
        .then(res => {
          if (res.success) {
            this.showEdit = true;
            this.form = res.content;
            if (this.form.marks) {
              this.dynamicTags = this.form.marks.split(",");
            }
          }
        })
        .catch(res => {});
    },

split() 方法用于把一个字符串分割成字符串数组。

 this.dynamicTags = this.form.marks.split(",");